/* Minification failed. Returning unminified contents.
(1082,13): run-time error CSS1030: Expected identifier, found ' '
(1084,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
 */
/* 印刷用 カスタマイズ */
body {
    height: 100%;
    -webkit-print-color-adjust: exact;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
}

/* table-rack 追加スタイル */

.table-rack {
    margin-bottom: 0;
}

.table-rack tbody:hover {
    background-color: #f5f5f5;
}

.table-rack > tbody+tbody {
    border-top: 1px;
}

.table-rack > caption {
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    text-align: center;
    caption-side: bottom;
}

.table-rack > tbody > tr > td {
    font-size: xx-small;
    padding: 0;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
}

.table-rack > tbody > tr > td > div {
    display: -ms-flexbox;
    display: flex;
    background-repeat: no-repeat; 
    -moz-background-size:100% 100%;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    word-break: break-all;
}

.table-rack > tbody > tr > td div span.image-unit {
    background: rgba(128, 128, 128, 0.5) ;
}

/* table-multi-rack 段組みラック用スタイル */

.table-multi-rack {
    margin-bottom: 0;
    table-layout: fixed;
}

.table-multi-rack div.select-unit {
    outline: 2px solid #3c8dbc;
}

.table-multi-rack td:first-child {
    font-size: xx-small;
    width: 24px;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
}

.table-multi-rack > tbody > tr > td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.table-multi-rack > tbody > tr > td > div {
    font-size: xx-small;
    display: -ms-flexbox;
    display: flex;
    background-repeat: no-repeat; 
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    word-break: break-all;
    cursor: pointer;
}

.table-multi-rack > tbody > tr > td > div span.image-unit {
    background: rgba(128, 128, 128, 0.5) ;
}

.table-multi-rack > tbody > tr > td > div:hover {
    background-color: #f5f5f5;
}

.table-multi-rack > tbody > tr:last-child > td {
    font-size: small;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    padding: 3px;
}

.table-multi-rack > tbody > tr:last-child {
    height: 15px !important; 
}

.table-multi-rack > tbody > tr:last-child > td.select-column {
    background-color: #3c8dbc;
    color: #fff;
}

/* フルラック ※heightを指定しないとFlexboxが使えないため */
.table-rack-full {
    height: 600px;
}

/* ハーフラック ※heightを指定しないとFlexboxが使えないため */
.table-rack-half {
    height: 300px;
}

/* クォータラック ※heightを指定しないとFlexboxが使えないため */
.table-rack-quarter {
    height: 150px;
}

.rack-pager {
    margin: 0;
}

/* 一覧のフィルター用ドロップダウンのスタイル */
.filterSelector {
    border-color : #eeeeee;
}

.margin-b-5 {
    margin-bottom: 5px;
}

/* ModalのSizeがlargeよりも大きいスタイル */
@media (min-width: 1092px) {
  .modal-larger {
    width: 1000px;
  }
}

/* UnitFromのフォーム部分用のスタイル */
.unitform{
    width: calc(100% - 25px);
}

/* ラックテーブルで移動先にユニットが既に搭載されている場合のスタイル */
.bg-duplicate{
    background-color: #dd4b39;
    color: #fff;
}

/* データテーブルのヘッダ用のスタイル（改行を入れない） */
.dataTable th{
    white-space: nowrap;
}


.searchModeButton > button{
    width:66px;
}

/* ロケーションセレクト用のスタイル */
.locationSelect{
    max-width: calc(100% - 170px);
}

/*検索条件チェックボックス用のスタイル */
input.checkBox{
    margin:10px 6px 11px 12px;
}
.checkForm{
    margin:7px 12px;
}

.margin-b-15{
    margin: 0px 0px 15px 0px;
}

.padding-tb-5{
    padding:5px 0px;
}

.RadioForm{
    margin:6px 3px !important;
}

.display-table{
    display:table;
}
.display-table-cell{
    display:table-cell;
}

.float-left{
    float:left;
}

.float-right{
    float:right;
}

.overflow-hidden{
    overflow:hidden;
}

.maxw-150{
    max-width:150px;
}

.conditionSelector{
    padding:0px 0px 10px;
}

/* ポップアップのbody */
.popup-content{
    background-color: #eCf0f5;
    padding: 8px;
    min-height: 100%;
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "meiryo UI", sans-serif;
}

.popup-content .box-body {
    padding: 0px !important;
}

/* ラック全表示ボタン */
.rack-all-button{
    padding-left: 8px;
    padding-right: 8px;
}

/*
    ユーザー情報表示 カスタマイズ
*/

/* ユーザーアイコン 背景色追加 */
.user-panel > .image > .user-image {
    background-color: #d2d6de;
}

/* ユーザー所属 */
.user-panel > .info > .user-belonging {
    font-weight: 100;    
    text-decoration: none;
    padding-right: 5px;
    margin-top: 3px;
    font-size: 11px;
}

/* カスタマイズ：ログイン ロゴ */
.login-image-logo {
    width : 75%;
}
.login-image-mascot {
    width : 15%;
}

/* カスタマイズ：レイアウトのレスポンシブ対応 */
.responsivLayout{
    width: 100%;
    padding-top : 75%;
    position: relative;
    border: solid 1px black;
}

.responsivLayout svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.responsivLayout svg.enableObject {
    cursor: pointer;
}

.responsivLayout svg.enableObject:hover {
    opacity : 0.7;
}

/* 追加スタイル：TOP画面のタイルリンク */
.jndcf-card img {
    border: solid 1px #ddd;
}

/* 追加スタイル：検索条件 */
.condition-fixed-selector {
    clear: both;
    overflow: hidden;
}

.condition-fixed-checkbox {
    float: left;
}

.condition-fixed-checkbox div {
    margin: 10px 6px 11px 12px;
}

.condition-fixed-selector-item {
    overflow: auto;
}

.template-table > tbody > tr:hover {
    cursor: pointer;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu,
.navbar-nav > .notifications-menu > .dropdown-menu > li > div {
    height: auto !important;
}

.navbar-nav > .notifications-menu > .book {
    width: 100px;
}

input[type="text"]::-ms-clear{
    display: none;
}

/* カスタマイズ：テンプレート画面のパネル */
.template-panel > .panel-heading {
    padding-left: 10px;
}

.template-panel > .panel-body {
    background-color: #edeff1;
    padding: 0px !important;
}

/* 追加スタイル：マルチラックビュー */

.multirack-wrapper {
    margin-left: -5px;
    margin-right: -5px;
}

.multirack-card {
    display: inline-block;
    width: 300px;
    padding-left: 5px;
    padding-right: 5px;
    vertical-align: top;
}

@media screen and ( max-width: 767px) {
    .multirack-card {
        width: 50%;
        padding-right: 8px;
        margin-right: -3px;
    }
}

@media screen and ( max-width: 480px) {
    .multirack-wrapper {
        margin-left: 0;
        margin-right: 0;
    }
    .multirack-card {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

@media print {
    
    .multirack-area{
        display: table-cell;
        float: none;
    }

    .content-print {
        padding: 1px !important;
    }

    /* 段組みラックポップアップ */
    .popup-content {
        padding: 3px !important;
    }
}

/* ラック搭載図のヘッダにロケーションのパンくずリストを追加 */

.box-header .breadcrumb {
    background-color: transparent;
    font-size: xx-small;
    margin-top: 5px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
}

.box-header .breadcrumb a {
    color: #666;
}
.box-header .breadcrumb a:hover {
    cursor: default;
}

/* 追加スタイル：ImageForm用スタイル */
.dcim-input-image {
    table-layout: fixed;
}

.dcim-input-image .dcim-input-addon {
    width: 86px;
}
/*
 * DCIMデザインスタイル
 * last modified 2016-12-02
 *
 * 設定
 * フォント
 * アイコン
 * 色彩
 * レイアウト
 * 追加指定用スタイル
 * md幅でメニュー非表示
 * ラック状態表示
 */


/*
 * 設定
 * ======================================== */


/* カスタマイズ：body
 * Y軸スクロールバーを常に表示
 * 日本語フォント設定追加 */

body {
    overflow-y: scroll;
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

/*
 * フォント
 * ======================================== */


/* カスタマイズ：contentフォント 「meiryo UI」に変更 */

.content,
.modal-body {
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "meiryo UI", sans-serif;
}

/* カスタマイズ：見出し フォントサイズ小さく */

.box-header .box-title,
.nav-tabs-custom>.nav-tabs>li.header {
    font-size: 14px;
}

/*
 * アイコン
 * ======================================== */


/* カスタマイズ：jndcf アイコンフォントの設定をAdminLTEに合わせる */

[class^="jndcf-"],
[class*=" jndcf-"] {
    display: inline-block;
}
.main-header .navbar .nav > li.user > a > [class^="jndcf-"],
.content-header > .breadcrumb > li > a > [class^="jndcf-"],
.nav-tabs-custom > .nav-tabs > li.header > [class^="jndcf-"] {
    margin-right: 5px;
}
.user-panel > .info > a > [class^="jndcf-"] {
    margin-right: 3px;
}
.dropdown-menu > li > a > [class^="jndcf-"] {
    margin-right: 10px;
}
.sidebar-menu > li > a > [class^="jndcf-"],
.sidebar-menu .treeview-menu > li > a > [class^="jndcf-"],
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > [class^="jndcf-"] {
    width: 20px;
}
.box-header > [class^="jndcf-"] {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    margin-right: 5px;
}
.todo-list > li .tools > [class^="jndcf-"] {
    margin-right: 5px;
    cursor: pointer;
}
.timeline > li > [class^="jndcf-"] {
    width: 30px;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    position: absolute;
    color: #666;
    background: #d2d6de;
    border-radius: 50%;
    text-align: center;
    left: 18px;
    top: 0;
}
.btn-app > [class^="jndcf-"] {
    font-size: 20px;
    display: block;
}

/*
 * 色彩
 * ======================================== */


/* カスタマイズ：skin（skin-greenベース）
 * ヘッダーの色をサイドナビと統一 */

.skin-green .main-header .logo {
    background-color: #222d32;
    color: #727e83;
}
.skin-green .main-header .logo:hover {
    background-color: #1e282c;
}
.skin-green .main-header .navbar {
    background-color: #1a2226;
}
.skin-green .main-header .navbar .sidebar-toggle {
    color: #b8c7ce;
}
.skin-green .main-header .navbar .sidebar-toggle:hover {
    background-color: transparent;
}
.skin-green .sidebar-menu>li:hover>a,
.skin-green .sidebar-menu>li.active>a {
    border-left-color: #b8c7ce;
}
.skin-green .main-sidebar {
    background-color: #323940;
    color: #eee;
}
.skin-green .main-sidebar a {
    color: #dde0e6;
}
.skin-green .sidebar-menu>li.header {
    color: #4b646f;
    background: #1a2226;
}
.skin-green .content-wrapper {
    background-color: #edeff1;
}

/* カスタマイズ：modal 背景色をcontentと統一 */

.skin-green .modal-body {
    background-color: #edeff1;
}

/*
 * レイアウト
 * ======================================== */


/* カスタマイズ：main-header 高さ30px */

.main-header {
    position: relative;
}
.main-header .logo {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: left;
    font-weight: bold;
    padding-left: 40px;
}
@media screen and (max-width: 767px) {
    .main-header .logo {
        padding: 0 15px;
        text-align: center;
    }
}
.main-header .navbar {
    height: 30px;
    min-height: 30px;
}
.main-header .navbar .sidebar-toggle {
    padding: 5px 15px;
    position: absolute;
}
.navbar-nav>li>a,
.navbar-custom-menu .navbar-nav>li>a {
    padding: 5px 20px 5px 15px;
}
.main-header .navbar .nav>li>a>.label {
    padding: 2px;
    top: 13px;
    font-size: 8px;
}
.main-sidebar {
    padding-top: 30px;
}
@media screen and (max-width: 767px) {
    .main-sidebar {
        padding-top: 60px;
    }
}
.sidebar-form,
.sidebar-menu>li.header {
    padding: 9px 25px 9px 15px;
    line-height: 12px;
}
.main-footer {
    background: #ddd;
    border-top: none;
    color: #999;
    font-size: 10px;
    padding: 5px 15px;
}

/* カスタマイズ：content */

.content-wrapper {
    position: relative;
}
.content-header {
    padding: 10px 15px 0;
    overflow: hidden;
}
.content-header>h1 {
    font-size: 14px;
    font-weight: bold;
    color: #495056;
    float: left;
    margin-right: 20px;
    letter-spacing: 1px;
}
@media (max-width: 767px) {
    .content-header>h1 {
        float: none;
    }
}
.content {
    padding-top: 10px;
}

/* カスタマイズ：box 余白小さく */

.box {
    border-top: 2px solid #d2d6de;
    border-radius: 0;
    margin-bottom: 10px;
}
.box-header {
    padding: 5px 10px;
}
.box-header .btn {
    padding: 2px 15px;
}
.box-header .btn-box-tool {
    padding: 2px 5px;
}
.box-header>.box-tools {
    top: 4px;
}

/* カスタマイズ：breadcrumb 左寄せ */

.content-header>.breadcrumb {
    float: left;
    font-size: 12px;
    padding: 0;
    position: static;
    top: 3px;
}
.content-header>.breadcrumb a {
    color: #666;
}
.content-header>.breadcrumb {
    top: 0;
    margin-top: 5px;
    background-color: transparent;
}
@media (min-width: 768px) {
    .content-header>.breadcrumb {
        top: 10px;
        margin-top: 0;
        background-color: transparent;
    }
}

/* カスタマイズ：gutter幅20px */

.row,
.form-horizontal .form-group {
    margin-right: -10px;
    margin-left: -10px;
}
[class^="col-"] {
    padding-right: 10px;
    padding-left: 10px;
}
.form-horizontal .has-feedback .form-control-feedback {
    right: 10px;
}

/* カスタマイズ：form-control-static 枠線追加 */

.form-control-static {
    padding: 6px 12px;
    border: 1px solid #eee;
}

/* カスタマイズ：colorpicker (static) */

.colorpicker-element .form-control-static ~ .input-group-addon {
    border-color: #eee;
}
.colorpicker-element .form-control-static ~ .input-group-addon i {
    cursor: auto;
}

/* カスタマイズ：treeview 余白小さく */

.treeview .list-group-item {
    padding: 5px 10px;
    border-color: #eee;
}
.treeview span.indent {
    margin-left: 2% !important;
    margin-right: 2% !important;
}

/* カスタマイズ：ラックビューslick */

.slick-slider {
    margin-bottom: 0;
}

/* カスタマイズ：table-rack 余白小さく、色彩変更、1列目（U番号）の幅を固定 */

.table-rack,
.table-multi-rack {
    border: 1px solid #666;
}
.table-rack > tbody > tr > td,
.table-multi-rack > tbody > tr > td {
    border-color: #666;
    font-size: 12px;
    line-height: 1.2;
}
.table-rack td:first-child {
    width: 24px;
}
.table-rack > tbody > tr > td div,
.table-multi-rack > tbody > tr > td div {
    font-size: 12px;
}
.table-rack > tbody > tr > td:nth-child(n+2),
.table-multi-rack > tbody > tr > td:nth-child(n+2) {
    background-color: #ddeeff;
}
.table-rack tbody:hover > tr > td:nth-child(n+2) {
    background-color: #cadef2;
}
.table-rack > tbody.bg-primary > tr > td,
.table-multi-rack > tbody.bg-primary > tr > td {
    color: #fff;
    background-color: #428bca;
}
.table-rack > tbody.bg-primary:hover > tr > td,
.table-multi-rack > tbody.bg-primary:hover > tr > td {
    background-color: #347ebe;
}
.table-rack > tbody.bg-duplicate:hover > tr > td {
    background-color: #cc3c2a;
}
.table-multi-rack > tbody > tr:last-child > td {
    background-color: #f4f4f4;
}
.table-multi-rack > tbody > tr:last-child > td.select-column {
    background-color: #428bca;
    color: #fff;
}
.table-multi-rack > tbody > tr > td > div:hover {
    background-color: #cadef2;
}

/* Add Y.Miyake IE対応 */
table.table-rack th:last-child,
table.table-rack td:last-child,
table.table-multi-rack th:last-child,
table.table-multi-rack td:last-child {
	border-right-width:1px;
}

/* カスタマイズ：nav-tabs */

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    font-weight: bold;
}

/* カスタマイズ：box-body内タブ */

.box-body .nav-tabs {
    border-bottom-color: #eee;
}
.box-body .nav-tabs>li>a,
.box-body .nav-tabs>li>a:hover {
    padding: 6px 12px;
}
.box-body .nav-tabs>li>a:hover {
    border-color: #eee;
}
.box-body .nav-tabs>li.active>a,
.box-body .nav-tabs>li.active>a:focus,
.box-body .nav-tabs>li.active>a:hover {
    border-color: #eee;
    border-bottom-color: transparent;
}
.box-body .tab-content {
    background: #fff;
    padding-top: 15px;
}

/*
 * 追加スタイル
 * ======================================== */


/* 追加スタイル：ユニット画面タブ */

.dcim-unit-tabs > div>.nav-tabs {
    font-size: 14px;
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    line-height: 1;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.dcim-unit-tabs > div>.nav-tabs a {
    padding: 5px 15px;
}
.dcim-unit-tabs > div>.nav-tabs >li.active>a,
.dcim-unit-tabs > div>.nav-tabs >li.active>a:focus,
.dcim-unit-tabs > div>.nav-tabs >li.active>a:hover {
    border-color: #fff;
}
.dcim-unit-tabs > div>.nav-tabs >li.open>a,
.dcim-unit-tabs > div>.nav-tabs >li.open>a:focus,
.dcim-unit-tabs > div>.nav-tabs >li.open>a:hover {
    border-color: #fff;
}

/* 追加スタイル：TOP画面のタイルリンク */

.jndcf-card-wrapper {
    margin-left: -5px;
    margin-right: -5px;
}
.jndcf-card {
    display: inline-block;
    width: 250px;
    padding-left: 5px;
    padding-right: 5px;
    vertical-align: top;
}
.jndcf-card a:hover img {
    opacity: 0.8;
}
@media screen and (max-width: 767px) {
    .jndcf-card {
        width: 50%;
        padding-right: 8px;
        margin-right: -3px;
    }
    .jndcf-card img {
        width: 100%;
    }
}
@media screen and (max-width: 480px) {
    .jndcf-card-wrapper {
        margin-left: 0;
        margin-right: 0;
    }
    .jndcf-card {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .jndcf-card img {
        width: 100%;
    }
}

/* 追加スタイル：inputを並べる */

.dcim-input-group {
    display: table;
    width: 100%;
}
.dcim-input-item {
    display: table-cell;
    vertical-align: middle;
    padding-right: 5px;
}
.dcim-input-item:last-child {
    padding-right: 0;
}
.dcim-input-addon {
    width: 1%;
    white-space: nowrap;
}
.dcim-input-item img {
    max-height: 200px;
}

/* 追加スタイル：vertical-align指定 */

.va-t {
    vertical-align: top !important;
}
.va-m {
    vertical-align: middle !important;
}
.va-b {
    vertical-align: bottom !important;
}

/* 追加スタイル：margin指定 */

.mt-0 {
    margin-top: 0 !important;
}
.mb-0 {
    margin-bottom: 0 !important;
}
.mr-0 {
    margin-right: 0 !important;
}
.ml-0 {
    margin-left: 0 !important;
}
.mt-05 {
    margin-top: 5px;
}
.mb-05 {
    margin-bottom: 5px;
}
.mr-05 {
    margin-right: 5px;
}
.ml-05 {
    margin-left: 5px;
}
.mt-1 {
    margin-top: 10px;
}
.mb-1 {
    margin-bottom: 10px;
}
.mr-1 {
    margin-right: 10px;
}
.ml-1 {
    margin-left: 10px;
}
.mt-2 {
    margin-top: 20px;
}
.mb-2 {
    margin-bottom: 20px;
}
.mr-2 {
    margin-right: 20px;
}
.ml-2 {
    margin-left: 20px;
}
.mtb-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.mlr-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
.mtb-05 {
    margin-top: 5px;
    margin-bottom: 5px;
}
.mlr-05 {
    margin-right: 5px;
    margin-left: 5px;
}
.mtb-1 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.mlr-1 {
    margin-right: 10px;
    margin-left: 10px;
}
.mtb-2 {
    margin-top: 20px;
    margin-bottom: 20px;
}
.mlr-2 {
    margin-right: 20px;
    margin-left: 20px;
}

/* 追加スタイル：padding指定 */

.pa-0 {
    padding: 0 !important;
}
.pa-1 {
    padding: 10px;
}

/* 追加スタイル：text-align指定 */

.ta-l {
    text-align: left !important;
}
.ta-r {
    text-align: right !important;
}
.ta-c {
    text-align: center !important;
}
.ta-j {
    text-align: justify !important;
}

/*
 * サンプル：md幅でメニュー非表示
 * ======================================== */


/*
このまま使用すると、md幅のときにメニューのトグルが効かないので、
admin-lte/dist/js/app.jsの125行目あたり
screenSizesのsmを992にする。（デフォルトは768）
*/

screenSizes: {
    xs: 480,
    sm: 992,
    md: 992,
    lg: 1200
}

@media screen and (min-width: 768px) {
    body {
        -ms-overflow-x: auto;
        overflow-x: auto;
        -ms-overflow-y: scroll;
        overflow-y: scroll;
    }
    .wrapper {
        min-width: 738px;
    }
    .sidebar-toggle {
        position: absolute;
        left: -230px !important;
        top: 0;
    }
}
@media screen and (max-width: 991px) {
    .content-wrapper,
    .right-side,
    .main-footer {
        margin-left: 0;
    }
    .main-sidebar,
    .left-side {
        -webkit-transform: translate(-230px, 0);
        -ms-transform: translate(-230px, 0);
        -o-transform: translate(-230px, 0);
        transform: translate(-230px, 0);
    }
    .sidebar-open .main-sidebar,
    .sidebar-open .left-side {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .sidebar-open .content-wrapper,
    .sidebar-open .right-side,
    .sidebar-open .main-footer {
        -webkit-transform: translate(230px, 0);
        -ms-transform: translate(230px, 0);
        -o-transform: translate(230px, 0);
        transform: translate(230px, 0);
    }
}
@media screen and (min-width: 768px) {
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        float: left;
    }
    .col-md-12 {
        width: 100%;
    }
    .col-md-11 {
        width: 91.66666667%;
    }
    .col-md-10 {
        width: 83.33333333%;
    }
    .col-md-9 {
        width: 75%;
    }
    .col-md-8 {
        width: 66.66666667%;
    }
    .col-md-7 {
        width: 58.33333333%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-5 {
        width: 41.66666667%;
    }
    .col-md-4 {
        width: 33.33333333%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    .col-md-1 {
        width: 8.33333333%;
    }
    .col-md-pull-12 {
        right: 100%;
    }
    .col-md-pull-11 {
        right: 91.66666667%;
    }
    .col-md-pull-10 {
        right: 83.33333333%;
    }
    .col-md-pull-9 {
        right: 75%;
    }
    .col-md-pull-8 {
        right: 66.66666667%;
    }
    .col-md-pull-7 {
        right: 58.33333333%;
    }
    .col-md-pull-6 {
        right: 50%;
    }
    .col-md-pull-5 {
        right: 41.66666667%;
    }
    .col-md-pull-4 {
        right: 33.33333333%;
    }
    .col-md-pull-3 {
        right: 25%;
    }
    .col-md-pull-2 {
        right: 16.66666667%;
    }
    .col-md-pull-1 {
        right: 8.33333333%;
    }
    .col-md-pull-0 {
        right: auto;
    }
    .col-md-push-12 {
        left: 100%;
    }
    .col-md-push-11 {
        left: 91.66666667%;
    }
    .col-md-push-10 {
        left: 83.33333333%;
    }
    .col-md-push-9 {
        left: 75%;
    }
    .col-md-push-8 {
        left: 66.66666667%;
    }
    .col-md-push-7 {
        left: 58.33333333%;
    }
    .col-md-push-6 {
        left: 50%;
    }
    .col-md-push-5 {
        left: 41.66666667%;
    }
    .col-md-push-4 {
        left: 33.33333333%;
    }
    .col-md-push-3 {
        left: 25%;
    }
    .col-md-push-2 {
        left: 16.66666667%;
    }
    .col-md-push-1 {
        left: 8.33333333%;
    }
    .col-md-push-0 {
        left: auto;
    }
    .col-md-offset-12 {
        margin-left: 100%;
    }
    .col-md-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-md-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-md-offset-9 {
        margin-left: 75%;
    }
    .col-md-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-md-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-md-offset-6 {
        margin-left: 50%;
    }
    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-md-offset-3 {
        margin-left: 25%;
    }
    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-md-offset-0 {
        margin-left: 0;
    }
}

/*
 * サンプル：ラックの「使用中」「予約済み」の状態を丸で表示
 * ======================================== */


/* このサンプルでは色で判別していますが、実際に使用する際は、classを使ったほうが良いです。
 * 例:<p class="form-control-static rack-status rack-status-occupied">使用中</p> */

.form-control-static[style="background-color: rgb(0, 255, 127);"],
.form-control-static[style="background-color: rgb(139, 69, 19);"] {
    background-color: #ffffff !important;
}
.form-control-static[style="background-color: rgb(255, 255, 255);"]:before,
.form-control-static[style="background-color: rgb(0, 255, 127);"]:before,
.form-control-static[style="background-color: rgb(139, 69, 19);"]:before {
    content: "";
    display: inline-block;
    vertical-align: bottom;
    margin-right: 10px;
    width: 1.4em;
    height: 1.4em;
    border: 2px solid #666;
    border-radius: 50%;
}

/* 「使用中」 */

.form-control-static[style="background-color: rgb(0, 255, 127);"]:before {
    background: rgb(0, 255, 127);
}

/* 「予約済み」 */

.form-control-static[style="background-color: rgb(139, 69, 19);"]:before {
    background: rgb(239, 127, 49);
}

/* classで指定した場合 */

.rack-status:before {
    content: "";
    display: inline-block;
    vertical-align: bottom;
    margin-right: 10px;
    width: 1.4em;
    height: 1.4em;
    border: 2px solid #666;
    border-radius: 50%;
}
.rack-status-occupied:before {
    background: rgb(0, 255, 127);
}
.rack-status-reserved:before {
    background: rgb(239, 127, 49);
}

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