ul, li {
    list-style: none;
}

.bold {
    font-weight: bold;
}

.red {
    color: red;
    padding-right: 5px;
}

.green {
    color: #28dc27;
}

.blue {
    color: #23b7e5;
}

.gray {
    color: gray;
}

.radius {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 0 6px -2px 0;
}

.bg-green {
    background-color: #3c0;
}

.bg-red {
    background-color: red;
}

.bg-blue {
    background-color: #0cf;
}

.blue {
    color: #23b7e5;
    font-weight: bold;
}

.pr-5 {
    padding-right: 5px;
}

/* .pane_f {
	background: #fff;
} */
#pool {
    margin-top: 10px;
}

.btn-info {
    color: #ffffff !important;
    background-color: #31b0d5 !important;
    border-color: #31b0d5;
}
.toolbar .btn {
    margin: 0 2px 0px 0px;
    padding: 2px 7px;
    border: 1px solid #fff;
    border-radius: 0;
    background-color: transparent !important;
    font-size: 12px;
}

/* ����������ʽ  */
.btn-default {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #31b0d5;
}

.btn-default:hover {
    border: 1px solid #31b0d5;
}

.vm .overview {
    font-size: 14px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.3);
    padding: 0 24px 0 10px;
    line-height: 40px;
    margin-top: 10px;
}

.vm .resources-list {
    background: rgba(0, 0, 0, 0.3);
    padding: 11px;
    border: 1px solid #24C1FF;
}

.global-border-search {
    margin: 11px;
    background: rgba(37, 79, 118, .3);
    color: #fff;
}

.global-border-search .title{
    font-size: 18px;
    padding: 15px 0 10px 15px;
}
/*.vm .resources-list .global-border-search > .title {*/
    /*display: inline-block;*/
    /*text-indent: 8px;*/
    /*border-left: 2px solid #88B7E0;*/
    /*margin-top: 8px;*/
    /*margin-bottom: 8px;*/
    /*margin-right: 8px;*/
    /*font-size: 15px;*/
/*}*/

.vm .resources-list .global-border-search > ul {
    margin: 0;
    padding: 0;
}

.vm .resources-list .global-border-search > ul > li .resources {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #5c5e71;
}

.vm .resources-list .global-border-search > ul > li .resources .resources-title {
    border-bottom: 1px solid #5c5e71;
    height: 38px;
    padding: 9px 10px;
    margin: 0;
}

.vm .resources-list .global-border-search > ul > li .resources .resources-title .cart {
    float: right;
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    margin: -9px;
    text-align: center;
    border-left: 1px solid #e1e6eb;
}

.vm .resources-list .global-border-search > ul > li .resources .resources-content {
    /* width: 508px; */
    height: 100%;
    overflow: hidden;
    padding: 28px 24px;
}

.vm .resources-list .global-border-search > ul > li .resources .resources-content > .item {
    padding: 0;
    width: 30%;
    margin: 0 7%;
}

.vm .resources-list .global-border-search > ul > li .resources .resources-content > .item > li {
    width: 100%;
    height: 100%;
    margin-bottom: 16px;
    background-color: #f3f3f3;
    border-radius: 4px;
    padding-left: 16px;
    font-size: 12px;
    line-height: 24px;
}

.vm .resources-list .global-border-search > ul > li .resources .resources-content > .item > li a {
    padding-right: 6px;
}

.vm .resources-list .global-border-search > ul > li .resources .resources-content > .item > li span {
    color: #06c;
}

.vm .resources-list  .global-border-search> ul > li .resources .resources-content .relation-line {
    background: url(../img/vm-init-relation-line.png) no-repeat center center;
    height: 126px;
    width: 10%;
    margin-top: 14px;
}

/* .table-search .fa-search {
    height: 100%;
    font-size: 16px;
    width: 40px;
    text-align: center;
} */
/* ʹ��˵�� */
.introduce {
    width: 100%;
    height: 100%;
    overflow: hidden;
    line-height: 22px;
    padding: 10px 10px 0 10px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.3);
    font-size: 14px;
    font-weight: 500;
}

.introduce .describe {
    float: left;
    width: 80%;
    height: 63px;
    overflow: hidden;
    word-wrap: break-word;
    border-right: 2px solid #2a3461;
    color: #b3c5d3;
}

.introduce .help {
    float: left;
    width: 20%;
    height: 63px;
    padding-left: 20px;
    padding-top: 0px;
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    color: #246fca;
}

.introduce .help i {
    font-size: 42px;
    margin: 2px;
    color: #1d7df8;
}

.resource-list {
    margin-top: 10px;
    padding: 16px 10px;
    background: rgba(0, 0, 0, 0.3);
}

.resource-list .page-title {
    display: table-cell;
    padding: 0 10px;
    border-left: 2px solid #88B7E0;
    border-bottom: 0;
    min-width: 80px;
    color: #fff;
}

.page-title {
    padding: 16px 0;
    border-bottom: 1px solid #727187;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.page-title .title {
    display: inline-block;
    border-left: 2px solid #88B7E0;
    text-indent: 8px;
    margin-left: 10px;
}

.page-title .back {
    border: 1px solid #727187;
    background-color: rgba(200, 200, 200, 0.2);
    margin-left: 10px;
    padding: 4px 12px;
    font-weight: normal;
}

.page-title .back:hover {
    background-color: rgba(200, 200, 200, 0.4);
}

.btn-top {
    margin-bottom: 5px;
}

.btn-top:hover {
    color: #ffffff !important;
    background-color: #2266ba !important;
    border-color: #2266ba;
}

.table-search input {
    background: rgba(0, 0, 0, 0);
    border: 0;
    color: #fff;
    border-radius: 0;
    border-right: 1px solid #5c5e71;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    /*width: 80%;*/
}

.fa-search {
    margin-left: 5px;
    font-size: 18px;
    margin-right: 5px;
}

.dropdown-toggle {
    min-width: 160px;
}

.btn-left {
    padding-left: 10px;
}

.page-title .back i {
    padding-right: 6px;
}

.mycontent {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border: 1px solid #24C1FF;
}

.mycontent .tool {
    margin-top: 11px;
}

.mycontent .search {
    /* float: left; */
    padding-left: 6%;
}

.mt-10 {
    margin-top: 10px;
}

.condition {
    background-color: rgba(168, 172, 224, 0.2);
    border-color: rgba(168, 172, 224, 0.2);
    /* pointer-events: none; */
    color: #fff !important;
}

.condition:hover {
    background-color: rgba(168, 172, 224, 0.4);
    border-color: rgba(168, 172, 224, 0.4);
}

/* .condition:hover #remain{
	display:inline-block;
} */
.table-search {
    /*  float: left; */
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 0px;
    padding: 0px 0;
}

/*ui-grid*/
.ui-grid,
.ui-grid-header-cell {
    border: 0;
}

.ui-grid-header {
    border-bottom: 0;
}

.ui-grid-top-panel {
    background: rgba(37,79,118,.8);
    color: #fff;
    font-weight: normal;
}
.modal-body .ui-grid-top-panel{
background: #53a1c7;
}
.modal-body .ui-grid-cell{
    color: #000;
    border-color: #53a1c7;
}
.modal-body .ui-grid-row.ui-grid-row-selected>[ui-grid-row]>.ui-grid-cell{
    color:#000;
}
.modal-body .ui-grid-pager-panel{
    color: #000;
}
.modal-body .ui-grid-pager-row-count-picker select{
    border-color: #53a1c7;
}
.modal-body .ui-grid-pager-control input{
    border-color: #53a1c7;
}
.modal-body .ui-grid-pager-control button.disabled,
.modal-body .ui-grid-pager-control button[disabled],
.modal-body fieldset[disabled] .ui-grid-pager-control button{
    border-color: #9e9e9e;
}
.modal-body .ui-grid-pager-control .first-triangle{
    border-color: transparent #9e9e9e transparent transparent;
}
.modal-body .ui-grid-pager-control .first-bar{
    border-left: 2px solid #9e9e9e;
}
.modal-body .ui-grid-pager-control button.disabled:hover,
.modal-body .ui-grid-pager-control button[disabled]:hover,
.modal-body fieldset[disabled] .ui-grid-pager-control button:hover,
.modal-body .ui-grid-pager-control button.disabled:focus,
.modal-body .ui-grid-pager-control button[disabled]:focus,
.modal-body fieldset[disabled] .ui-grid-pager-control button:focus,
.modal-body .ui-grid-pager-control button.disabled.focus,
.modal-body .ui-grid-pager-control button[disabled].focus,
.modal-body fieldset[disabled] .ui-grid-pager-control button.focus{
    border-color:#9e9e9e;
}
.modal-body .ui-grid-pager-control .last-triangle{
    border-color: transparent transparent transparent #9e9e9e;
}
.modal-body .ui-grid-pager-control .last-bar{
    border-left: 2px solid #9e9e9e;
}
.modal-body .ui-grid-pager-control input,
.modal-body .ui-grid-pager-row-count-picker select{
    border: 1px solid #53a1c7;
    color: #000;
}
/*��ͷ��ť*/
.ui-grid-header-cell {
    vertical-align: middle;
}

/*��ͷ����*/
.ui-grid-header-cell-row .ui-grid-cell-contents {
    text-align: left;
    text-indent: 10px;
    padding: 15px 0;
}

/*��ͷ���߰�ť*/
.ui-grid-menu-button {
    height: 50px;
    background: rgba(0, 0, 0, 0.2);
    line-height: 50px;
    color: #2877d8;
    border: 0;
}

/*��ͷ����ť*/
.ui-grid-column-menu-button {
    top: 13px;
}

.ui-grid-canvas {
    padding-top: 0;
}

.ui-grid-cell {
    border-right: 0px solid #eef3f9;
    border-bottom: 0px solid #eef3f9;
    height: 40px !important;
    line-height: 28px;
    color: #bdd0df;
    border-bottom: 1px solid #727187;
    text-align: left;
}

.ui-grid-cell:first-child {
    text-align: center;
}

.ui-grid-row:hover .ui-grid-cell {
    background: rgba(34, 102, 186, 0.35);
    color: #fff;
}

.ui-grid-menu .ui-grid-menu-inner ul li button {
    background: #f9f9f9;
}

.ui-grid-pager-panel {
    color: white;
}

#remain {
    display: none;
    position: absolute;
    left: 22%;
    top: 65px;
    color: red;
    border-radius: 2%;
    padding: 5px 6px;
    width: 35%;
    z-index: 1000;
    line-height: 22px;
    background: #000;
    color: #fff;
    text-align: center;
    opacity: 0.7;
    border-radius: 4px;
    font-size: 12px;
}

#arrows {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid;
    left: 50%;
    margin-left: -10px;
    top: -10px;
    border-bottom-color: rgba(0, 0, 0, 0.7);
}

.displayName:hover {
    color: #337ab7;
    /* text-decoration: underline; */
    cursor: pointer;
}

@media (max-width: 1200px) {
    #remain {
        left: 35%;
    }
}

@media (max-width: 1000px) {
    #remain {
        left: 50%;
    }
}

@media (max-width: 768px) {
    .vm .resources-list > ul > li .resources .resources-content {
        width: 100%;
    }

    .vm .resources-list > ul > li .resources .resources-content > .item {
        width: 40%;
        margin: 0 2%;
    }

    #remain {
        left: 30%;
        top: 100%;
    }
}

@media (max-width: 360px) {
    .vm .resources-list > ul > li .resources .resources-content {
        padding: 28px 0;
    }

    .vm .resources-list > ul > li .resources .resources-content > .item > li {
        padding-left: 4px;
    }

    #remain {
        left: 0%;
    }
}