
#apikey_box {
    width: 40%;
    max-width: 670px;
    min-width: 500px;
    background: #dddee3;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    min-height: 250px;
}
#apikey_box #schematic_key {
    background: #f7f7f7;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #babdc2;
    height: 40px;
    width: 100%;
    font-size: 26px;
    padding: 0 10px;
}
#apikey_box .container {
    margin: 0 20px;
}
#apikey_box .button {
    width: 100%;
    margin-top: 20px;
    height: 40px;
    font-size: 20px;
}
#apikey_box h2 {
    background: #6d6d6d; /* Old browsers */
    background: -moz-linear-gradient(top, #6d6d6d 0%, #010101 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6d6d6d 0%,#010101 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6d6d6d 0%,#010101 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6d', endColorstr='#010101',GradientType=0 ); /* IE6-9 */
    padding: 0 20px;
    color: #FFF;
    line-height: 38px;
    font-weight: bold;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
#api_key_error {
    color:  red;
    font-size: 17px;
    margin: 10px;
}
#api_key_success {
    color:  green;
    font-size: 17px;
    margin: 10px;
}
#api_key_success_proceed {
    margin: 10px;
    line-height: 26px;
}

#filterSidebars label,
#filterSidebars label:before,
#filterSidebars label:after{
    line-height: 29px;
    box-sizing:border-box;
    margin:0;
    padding:0;
    /*transition*/
    -webkit-transition:.25s ease-in-out;
    -moz-transition:.25s ease-in-out;
    -o-transition:.25s ease-in-out;
    transition:.25s ease-in-out;
    outline:none;
    font-family:Helvetica Neue,helvetica,arial,verdana,sans-serif;
}
.likeDropdownHolder {
    position: relative;
    padding: 0;

    max-width: 500px;
}
.likeDropdownHolder .likeDropdown {
    background: #fff;
    border: 1px solid #DFDFDF;
    cursor: default;
    display: inline-block;
    margin-top: 2px;
    padding: 3px 2px 2px 5px;
    width: 100%;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
}
.likeDropdownHolder .likeDropdownOptions {
    width: 100%;
    position: absolute;
    z-index: 1000;
    margin-top: -1px;
}
.likeDropdownHolder .likeDropdownOptions .items {
    padding-bottom: 15px
}


.likeDropdownOptions .padding {
    border: 1px solid #bbbbbb;
    padding: 5px 10px;
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 0 0 3px 3px;
}

.likeDropdown.selected {
    border-color: #bbbbbb;
    z-index: 100000;
}



#filterSidebars {
    margin-bottom: 3px;
}

#filterSidebars .icon-options {
    cursor: pointer;
    float: right;
}
#filterSidebars .likeDropdownHolder {
    font-family: Arial;
    color: #3e3e3e;
    font-size: 16px;
    min-width: 280px;
}


#filterSidebars .likeDropdownOptions .active .label:hover {
    color: #0073aa;
    font-weight: bold;
    cursor: pointer;
}

#filterSidebars .likeDropdownHolder .likeDropdown {
    background: #0073aa;
    border-color: #383838;
    font-weight: bold;
    color: #FFF;
    padding: 5px 8px;
    cursor: pointer;
}
#filterSidebars .likeDropdownHolder .label {

    text-decoration: none;
}
#filterSidebars .likeDropdownHolder  .active  {
    font-weight: bold;
    color: #0073aa;
}

#filterSidebars .likeDropdownOptions .importantLabel {
    background: #f1f1f1;
    border-bottom: 1px solid #8a8a8a;
    font-weight: bold;
    padding: 10px 13px;
    box-shadow: 0px 1px 0px #c2c2c2;
}
#filterSidebars  .likeDropdownOptions .padding {
    /*    background: #dedede;*/
    padding-bottom: 0;
}
#filterSidebars  .likeDropdownOptions .mainItem:last-child .importantLabel {
    margin-bottom: 0px;
}

#filterSidebars .likeDropdownOptions .item {
    padding: 5px;

    overflow: hidden;
}
#filterSidebars  .likeDropdown .icon-down-dir:before {
    color: #FFFFFF;
}
#filterSidebars .likeDropdownOptions .item .icon:before {
    font-size: 13px;
}
#filterSidebars .likeDropdownOptions .active  .icon:before {
    color: #0073aa;
}
#filterSidebars .likeDropdownHolder .likeDropdownOptions .items {
    padding: 5px 0;

}
#filterSidebars .item .count {
    float: right;
    padding: 0 4px;
    font-size: 11px;
    border-radius: 3px;
    min-width: 20px;
    text-align: center;
    color: #5d5d5d;
    background: #ECECEC;
    font-weight: normal !important;
}
#filterSidebars .item.active .count {
    background: #0073aa;
    color: #fff;
    cursor: pointer;
}
#filterSidebars .item.active .count:hover {
    background: #0073aa;
}


.importantLabel {
    background: #f9f9f9;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: linear-gradient(to bottom, #f9f9f9 1%, #ebebeb 100%);
    display: block;
    padding: 3px 3px 3px 10px;
    margin: -5px -10px 5px -10px;
    border-bottom: 1px solid #BBB;
    box-shadow: 0px -1px 1px rgba(255, 255, 255, 1) inset;
}


.toggles{
    width:30px;
    text-align:center;
}
.ios-toggle,.ios-toggle:active{
    position:absolute;
    top:-5000px;
    height:0;
    width:0;
    opacity:0;
    border:none;
    outline:none;
}
.checkbox-label{
    display:block;
    position:relative;
    padding:5px;
    margin-bottom:10px;
    font-size:12px;
    line-height:16px;
    width:100%;
    height:18px;
    /*border-radius*/
    -webkit-border-radius:18px;
    -moz-border-radius:18px;
    border-radius:18px;
    background:#e2e2e2;
    cursor:pointer;
}
.checkbox-label:before{
    content:'';
    display:block;
    position:absolute;
    z-index:1;
    line-height:17px;
    text-indent:20px;
    height:18px;
    width:18px;
    /*border-radius*/
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    top:0px;
    left:0px;
    right:auto;
    background:white;
    /*box-shadow*/
    -webkit-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
    -moz-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
    box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
}
.checkbox-label:after{
    content: attr(data-off);
    display: block;
    position: absolute;
    z-index: 0;
    top: -4px;
    left: -30px;
    padding: 5px;
    height: 100%;
    width: 20px;
    text-align: right;
    color: #bfbfbf;
    white-space: nowrap;
}
.ios-toggle:checked + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
    -moz-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
    box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}
.ios-toggle:checked + .checkbox-label:before{
    left:calc(100% - 18px);
    /*box-shadow*/
    -webkit-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
    -moz-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
    box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
}
.ios-toggle:checked + .checkbox-label:after{
    content:attr(data-on);
    left: 33px;
    width: 18px;
}
/* GREEN CHECKBOX */

.checkbox1 + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
    -moz-box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
    box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
}
.checkbox1:checked + .checkbox-label{
    /*box-shadow*/
    -webkit-box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
    -moz-box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
    box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}
.checkbox1:checked + .checkbox-label:after{
    color:rgba(19,191,17,1);
}
.checkbox-label {
    display: block;
    position: relative;
    padding: 5px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 16px;
    width: 100%;
    height: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    background: #e2e2e2;
    cursor: pointer;
}
.toggles {
    width: 30px;
    text-align: center;
}
#schematic-enabled-pages {
    background: #ccc;
    color: #FFF;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid #989898;
    width: 100%;
    overflow: hidden;
}
#schematic-enabled-pages .enabled-page.selected {
    background: #f1f1f1;
    color: #505050;
}


#schematic-enabled-pages .enabled-page {  
    float: left;
    padding: 8px 6px;
    border-right: 1px solid #b7b7b7;
    cursor: pointer;
}
#schematic-enabled-pages .enabled-page:hover {
    box-shadow: 1px 1px 10px rgba(255,255,255,0.2) inset;
}


#apikey_box {
    width: 40%;
    max-width: 670px;
    min-width: 500px;
    background: #dddee3;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    min-height: 250px;
}
#apikey_box #schematic_key {
    background: #f7f7f7;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #babdc2;
    height: 40px;
    width: 100%;
    font-size: 26px;
    padding: 0 10px;
}
#apikey_box .container {
    margin: 0 20px;
}
#apikey_box .button {
    width: 100%;
    margin-top: 20px;
    height: 40px;
    font-size: 20px;
}
#apikey_box h2 {
    background: #6d6d6d; /* Old browsers */
    background: -moz-linear-gradient(top, #6d6d6d 0%, #010101 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6d6d6d 0%,#010101 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6d6d6d 0%,#010101 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6d', endColorstr='#010101',GradientType=0 ); /* IE6-9 */
    padding: 0 20px;
    color: #FFF;
    line-height: 38px;
    font-weight: bold;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
#api_key_error {
    color:  red;
    font-size: 17px;
    margin: 10px;
}
#api_key_success {
    color:  green;
    font-size: 17px;
    margin: 10px;
}
#api_key_success_proceed {
    margin: 10px;
    line-height: 26px;
}
#schema-help-tabs h3 {
    margin: 0 0 10px 0;
}
#schema-help-tabs .wp-list-table th,
#schema-help-tabs .wp-list-table td {
    font-size: 110%;
    line-height: 130%;
    padding: 4px 6px;
    border-bottom: 1px solid #ececec;
}
#_schematic_api_key {
    padding: 3px 10px;
}

.regular-text.password-field {
    text-security:disc !important;
    -webkit-text-security:disc !important;
    -mox-text-security:disc !important;
}

#preview-schema-dialog-parent {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#preview-schema-dialog-parent  #leftCol{
    flex-grow: 1;
    width: 50%;
    min-width: 100px;
    resize: horizontal;
    overflow: auto;
}
#preview-schema-dialog-parent #rightCol{
    flex-grow: 3;
    min-width: 50px;
    width: 50%;
    border-left: 8px solid #f9f9f9;
    overflow-y: scroll;
}
#jsonSchemaAce {
    width:95%;
    height: 300px;
}
#schema-import-tabs .row5 {
    margin-bottom: 5px;
}
.schema-row-template {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(0,0,0,.12);
}
.schema-row-template.schema-pending {
    background: #fffee6 !important;
}
.schema-row-template p {
    margin: 0;
}
.schema-row-template:nth-child(even) {
    background: #fbfbfb;
}
.schema-row-template .description {
    font-size: 14px;
}
.schema-row-template .title {
    font-weight: bold;
    color: #6090ca;
    padding-bottom: 5px;
}
.schema-row-template .tags {
    font-size: 12px;
    margin-top: 5px;
    font-style: italic;
    color: #797979;
    margin-bottom: 1px;
}
.schema-row-template .tags .tag {
    cursor: pointer;
}
#scrapeWebpage {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}
#webpageScrapeInput {
    height: 100px;
    max-height: 250px;
    font-size: 16px;
    display: inline-block;
    box-sizing: border-box;
    width: calc(100% - 190px);
    margin: 7px 10px 7px 0;
    border: 2px solid #e0e0e0;
    padding: 5px 10px;
}
#table-schema-preview {
    position: relative;
    border: 1px solid rgba(0,0,0,.12);
    border-collapse: collapse;
    font-size: 13px;
    background-color: rgb(255,255,255);
    width: 100%;
}
#table-schema-preview .json-value-td {
    font-weight: bold;
}
#table-schema-preview tr:hover {
    background-color: #eee;
}
#table-schema-preview tr {
    transition-duration: .28s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-property: background-color;
}
#table-schema-preview tr {
    height: inherit;
}
#table-schema-preview td {
    padding: 5px 10px;
    position: relative;
    vertical-align: middle;
    border-top: 1px solid rgba(0,0,0,.12);
    border-bottom: 1px solid rgba(0,0,0,.12);
    box-sizing: border-box;
    word-wrap: break-word;
}
#table-schema-preview .level-1 td {
    padding-left:25px;
}
#table-schema-preview .level-2 td {
    padding-left:50px;
}
#table-schema-preview .level-3 td {
    padding-left:75px;
}
#table-schema-preview .level-4 td {
    padding-left:100px;
}
#table-schema-preview .level-5 td {
    padding-left:125px;
}
#table-schema-preview .level-6 td {
    padding-left:150px;
}
.rules-group-container.hover-item {
    -webkit-transition: background-color 0.8s linear;
    -moz-transition: background-color 0.8s linear;
    -o-transition: background-color 0.8s linear;
    transition: background-color 0.8s linear;

}
.query-builder input[type='text']:focus {
    outline: none;
}
.query-builder ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #f0f0f0;
}
.query-builder ::-moz-placeholder { /* Firefox 19+ */
    color: #f0f0f0;
}
.query-builder :-ms-input-placeholder { /* IE 10+ */
    color: #f0f0f0;
}
.query-builder :-moz-placeholder { /* Firefox 18- */
    color: #f0f0f0;
}
.json-builder-button {
    font-size: 14px;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.json-builder-button.hidden {
    display: none !important
}
.rule-actions .json-builder-button {
    margin-top: 4px;
}
.rules-group-container.hover-item, .rules-group-container.hover-item  .rules-group-container {
    background: #ececec !important;
    border-color: #afafaf !important;
    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.1) inset;
}
.query-builder .rules-group-container {
    padding: 10px;
    padding-bottom: 6px;
    border: 1px solid #c2c2c2;
    background: rgba(250,240,210,.5);
    position: relative;
    margin: 0 0 10px 0;
    border-radius: 5px;
    background: rgba(244, 244, 244, 0.5);
}


#schematic-container .btn-group, #schematic-container .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

#schematic-container .pull-right {
    float: right!important;
}
.query-builder .rules-list {
    list-style: none;
    padding: 0 0 0 15px;
    margin: 0;
    min-height: 30px;
    margin-bottom: 10px;
}
.query-builder .rule-container {
    position: relative;
    margin: 4px 0;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #eee;
    background: rgba(255,255,255,.9);
}


.query-builder .rules-group-container.duplicate-error,
.query-builder .rule-container.duplicate-error {
    background: #ffe7e7 !important;
    color: #a22626 !important;
}
.query-builder .rule-container.duplicate-error > .rule-filter-container > .id,
.query-builder .rules-group-container.duplicate-error > .rules-group-header .id {
    border-color: red;
    color: red;
}

.query-builder .rules-list>::after,
.query-builder .rules-list>::before {
    content: '';
    position: absolute;
    left: -12px;
    width: 10px;
    height: calc(50% + 8px);
    border-color: #ccc;
    border-style: solid;
}
.query-builder .rules-list>:last-child::after{display:none}
.query-builder .rules-list>:first-child::before {
    top: -12px;
    height: calc(50% + 14px);
}
.query-builder .rules-list>::before {
    top: -8px;
    border-width: 0 0 2px 2px;
}
.query-builder .rules-list>:last-child::before {
    border-radius: 0 0 0 4px;
}
.rule-filter-container .form-control {
    display: block;
    width: 100%;
    min-height: 24px;
    height: 24px;
    padding: 3px 6px;
    font-size: 14px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.rule-filter-container {
    display: inline-block;
    margin: 0 5px 0 0;
    vertical-align: middle;
}

.rule-filter-container.value {
    width: 65%;
}
.rule-filter-container .form-control.id {
    width: 100%;
}
.rule-filter-container .form-control.id:placeholder-shown {
    width: 15px;
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.btn-xs, .btn-group-xs>.btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}.query-builder .rules-group-header {
    margin-bottom: 10px;
    overflow: hidden;
}
.query-builder .rules-list>::after {
    top: 50%;
    border-width: 0 0 0 2px;
}

/** SVG **/
#schema-graph svg {
    border: none;
}
#schema-graph .link {
    fill: none;
    stroke: #DADFE1;
    stroke-width: 1px;
}

#schema-graph .node {
    cursor: pointer;
}
#schema-graph  .node text {
    font-size: 12px;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
    fill: #333;
}
.d3-tip {
    position: fixed !important;
    top: 10px;
    z-index: 100000;
    max-width: 500px;
    left: 10px;
    font-size: 14px;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px 20px;
    word-wrap: break-word;
    background-color: rgba(255, 255, 255, 1);
    text-align: left;
}



.row-actions-templates {
    margin-bottom: 10px;
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: 10px;
}

.row-actions-templates .schema-browser-button  {
    cursor: pointer;
    display: inline-block;
    color: #666;
    background-color: #eee;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.3);
    border-bottom-width: 2px;
    margin-right: 5px;
}
.row-actions-templates .schema-browser-button.selected {
    background-color: #699DB6;
    border-color: rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    color: #FFF;
}

#schema-templates-dialog .field-row {
    margin-bottom: 10px;
}
#schema-templates-dialog .field-row input {
    padding: 5px;
    border: 1px solid #DDDDDD;

    background: -moz-linear-gradient(center top , #FFFFFF,  #EEEEEE 1px, #FFFFFF 20px);
    background: -webkit-gradient(linear, left top, left 20, from(#FFFFFF), color-stop(5%, #EEEEEE) to(#FFFFFF));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBFBFB', endColorstr='#FFFFFF');

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    -moz-box-shadow: 0 0 2px #DDDDDD;
    -webkit-box-shadow: 0 0 2px #DDDDDD;
    box-shadow: 0 0 2px #DDDDDD;
    width: calc(100% - 10px);
    height: 23px;
}
#schema-templates-dialog .field-row input[type="text"]:hover {
    border:1px solid #cccccc;
}
#schema-templates-dialog .field-row input[type="text"]:focus {
    box-shadow:0 0 2px #FFFE00;
}

#schema-templates-dialog ::placeholder {
    color: #d5d5d5;
    opacity: 1;
}
#schema-templates-dialog :-ms-input-placeholder {
    color: #d5d5d5;
}
#schema-templates-dialog ::-ms-input-placeholder {
    color: #d5d5d5;
}

#own-schema-settings  {
    border-top: 1px solid #e9e9e9;
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 10px;
}
.schema-button {
    border-radius: 3px;
    border: 1px solid #e9e9e9;
    padding: 3px;
    background: #fbfbfb;
    display: inline-block;
    margin-right: 5px;
    font-size: 11px;
    cursor: pointer;
}

#schema-templates-dialog .field-row .account-information {
    width: calc(33.33% - 22px);
    margin-right: 10px;
}

.mode-catalog .actions .delete {
    display: none;
}
#schema-list .actions span {
    font-size: 12px;
    cursor: pointer;
    margin-right: 5px;
}
#schema-list .actions .date {
    cursor: default;
}
#webpage-scrape-wrap {
    border: 2px solid #e0e0e0;
}
#webpage-scrape-wrap  .icon-internet {
    margin: 0 10px;
    color: #9e9e9e;
    font-size: 22px;
    margin-top: 11px;
    float: left;
}
#loading-scrape-schema {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    animation: spincircle 2s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

@keyframes spincircle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


#schematic-container .schema-label {
    float: right;
    font-size: 16px;
    background: #FfF;
    padding: 2px 6px;
    border-radius: 3px;
}

#schematic-container  .schema-label:empty {
    display: none;
}


.rules-group-container.collapsed .rules-group-body {
    position: relative;
    height: 95px;
    overflow: hidden;
}
.rules-group-container.collapsed  .group-actions {
    opacity: 0.25;
}
.rules-group-container.collapsed .collapsed-block {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 0;
    background: #f6f6f6;
    opacity: 0.85;
    z-index: 1;
}

.rules-group-header .rule-filter-container .form-control.id {
    width: 80%;
    display: inline-block;
}
.rules-group-header .rule-filter-container .form-control.id:placeholder-shown {
    width: 37px;
}


.rules-group-header .rule-filter-container .json-builder-button {
    margin: 0;
}

.rules-group-container.collapsed .icon-collapse {
    display: none;
}
.rules-group-container .icon-expand {
    display: none;
}
.rules-group-container.collapsed .icon-expand {
    display: inline-block;
}
.schema-parser-output .grouptitle {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #5d5d5d;
    margin-top: 15px;
    padding-left: 5px;
}
.schema-parser-output .parsed-schema-item {
    border: 1px solid #CCC;
    padding: 10px;
    margin-top: -1px;
    overflow: hidden;
}
.schema-parser-output .parsed-schema-title {
    display: inline-block;
    min-width: 200px;
    font-size: 17px;
}
.schema-option-group {
    float: right;
}


.parsed-schema-item.noimport {
    color: #ce2222;
    background: #fffdfd;
}

.schema-parser-output.schema-exists .schema-exists-options {
    display:block !important;
}
.schema-exists-options {
    font-size: 13px;
    margin-top: 5px;
}
.parsed-schema-item:not(.noimport) .schema-join-mode,
.parsed-schema-item:not(.noimport) .schema-keep-existing,
.parsed-schema-item:not(.noimport) .fully-replace-existing-schema,
.parsed-schema-item:not(.noimport) .schema-overwrite {
    color: #007fff;
    font-weight: bold;
    cursor: pointer;
}
.rules-group-container .rules-group-header .duplicate-button {
    display: none;
}
#schematic-container  .rules-group-container .rules-group-container .rules-group-container .rules-group-header .duplicate-button {
    display:inline-block;
}
#loading-save-schema-label {
    position: absolute;
    top: 65px;
    right: 16px;
    display: inline-block;
    background: #f9f9f9;
    padding: 1px 5px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #CCC;
    line-height: 19px;
}

.rules-group-container.minimized .rules-group-body {
    display:none;
}
.query-builder .minimized .rules-group-header {
    margin-bottom: 3px;
}
.rules-group-container.minimized .minimize-schema {
    display:none;
}
.rules-group-container .maximize-schema {
    display:none;
}
.rules-group-container.minimized .maximize-schema {
    display:inline-block;
}

#schematic-container .has-normal-id.rules-group-header .duplicate-button {
    display:none !important;
}
.isnode td {
    background-color: #eee;
}
#schema-templates-dialog.mode-catalog .private-schema-button, 
#schema-templates-dialog.mode-catalog .delete {
    display:none;
}
#schema-templates-dialog.mode-own .share-current-schema {
    display:none;
}

#close-catalog-account-settings,
#show-catalog-user-data {
    cursor: pointer;
    color: #699DB6;
}
#show-catalog-user-data:hover,
#close-catalog-account-settings:hover {
    border-bottom: 1px dotted #699DB6;
}

#close-template-preview,
#do-import-schema3,
#cancel-import-schema3 {
    margin-top:20px;
}
#schema-catalog-list {
    margin-top:15px;
}
#search-schema-templates {
    width: 90px;
    height: 24px;
    border-radius: 2px;
    border: 1px solid #e9e9e9;
    font-size: 11px;
    min-height: 25px;
}
#do-search-schema-templates {
    cursor: pointer;
}
#new-schema-content {
    padding: 5px;
    border: 1px solid #DDDDDD;
    margin-top: 12px;
    width: calc(100% - 13px);
}

#schema-author-about {
    font-size: 12px;
    color: #4c4c4c;
    margin-top: 5px;
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    padding: 5px;
    overflow: hidden;
}
#schema-author-about p  {
    margin: 5px 0;
}

#schema-used-filters {
    font-size: 13px;
}
#schema-used-filters .filter-value {
    color: #699DB6;
    font-weight: bold;
    font-size: 13px;
}

#schema-used-filters .remove-filter {
    cursor: pointer;
}
.row-actions-templates #temp-notice {
    padding: 2px 10px;
    text-align: center;
    font-size: 11px;
    background: #CCC;
    color: #FFF;
    margin: 0 auto;
    border-radius: 3px;
}
body.block-editor-page #schematic-catalog-options {
    margin-left: 0px;
    width: 100%;
}
#schematic-catalog-options {
    position: relative;
    background: #fff;
    margin-top: -17px;
    margin-left: -20px;
    padding-top: 15px;
    width: calc(100% + 20px);
    padding-bottom: 30px;

}
#notice-schema-agreement {
    padding: 0 10px;
    text-align: center;
    background: #eef3ff;
    border-radius: 3px;
    font-size: 12px;
}
#api-catalog-nickname-b {
    cursor: pointer;
    color: #406ebd;
}
#api-catalog-logged-in-bar {
    float: right;
}

#api-catalog-logout {
    float: right;
    margin-top: 1px;
    color: red;
    margin-right: 13px;
    font-size: 11px;
    cursor: pointer;   
}
.schematic-dialog .ui-dialog-content {
    width: calc(100% - 25px);
}
.schematic-dialog .ui-dialog-titlebar {
    padding: 0 10px !important;
}
.schematic-icon {
    float: left;
    width: 20px;
    height: 17px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px auto;
    margin-right: 8px;

}
/** fileupoad **/
.fileinput-button {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.fileinput-button input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px !important;
    direction: ltr;
    cursor: pointer;
}
#openSchematic {
    cursor: pointer; 
}



.compat-field-schematic input {
    display: none;
}
.compat-field-schematic p {
    margin: 0;
}
body:not(.openingSchematic) #rules-group-container-1 .rules-list:empty:before {
    background: #FFF;
    content: 'Schema is empty - create your own using the Add Node/Add Group Node Builder, Scrape from a website, import from JSON-LD code, browse the Templates Catalog or Import your own schemas from a file';
    display: inline-block;
    border-radius: 3px;
    padding: 3px 5px;
    border: 1px solid #CCC;
}
.mode-catalog #schema-list:empty:before {
    content: 'Loading...';
}
.schematic-dialog.ui-dialog .ui-dialog-title {
    line-height: 32px;
}
#schema-import-tabs {
    overflow-y: scroll;
    width: calc(100% - 20px);
}
#closeSchemaBuilder {
    text-decoration: none;
}

.helpNotification {
    cursor: pointer;
    color: #0073aa;
}
#schematic-settings .key-actions-schematic {
    cursor: pointer;
    color: #0073aa;
    border-bottom: 1px dashed;
}

.key-actions-schematic {
    display: inline-block;
    min-width: 35px;
    text-align: center;
}
.key-actions-schematic.hidden {
    display: none !important;
}
#schematic-container  .combine-schema {
    display: none !important;
}
#schematic-container .minimized .combine-schema {
    display: inline-block !important;
}

#schematic-container .rules-group-container.to-be-combined {
    border-color: #4d4dea;
    background: #dbe4ff;
}
#schema-author-about .authorAvatar {
    float: left;
    max-width: 37px;
    margin-right: 5px; 
}
#schema-parser-results .via-em {
    font-size: 12px;
    color: #546498;
    width: 550px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 7px;
    margin-bottom: 10px;
}

