@font-face {
    font-family: OpenSans-Bold;
    src: url("fonts/OpenSans/OpenSans-Bold.ttf") format('truetype');
}

@font-face {
    font-family: OpenSans-BoldItlaic;
    src: url("fonts/OpenSans/OpenSans-BoldItalic.ttf") format('truetype');
}

@font-face {
    font-family: OpenSans-ExtraBold;
    src: url("fonts/OpenSans/OpenSans-ExtraBold.ttf") format('truetype');
}

@font-face {
    font-family: OpenSans-ExtraBoldItalic;
    src: url("fonts/OpenSans/OpenSans-ExtraBoldItalic.ttf") format('truetype');
}

@font-face {
    font-family: OpenSans-Italic;
    src: url("fonts/OpenSans/OpenSans-Italic.ttf") format('truetype');
}

@font-face {
    font-family: OpenSans-Light;
    src: url("fonts/OpenSans/OpenSans-Light.ttf") format('truetype');
}

@font-face {
    font-family: OpenSans-LightItalic;
    src: url("fonts/OpenSans/OpenSans-LightItalic.ttf") format('truetype');
}

@font-face {
    font-family: OpenSans-Regular;
    src: url("fonts/OpenSans/OpenSans-Regular.ttf") format('truetype');
}

@font-face {
    font-family: OpenSans-Semibold;
    src: url("fonts/OpenSans/OpenSans-Semibold.ttf") format('truetype');
}

@font-face {
    font-family: OpenSans-SemiboldItalic;
    src: url("fonts/OpenSans/OpenSans-SemiboldItalic.ttf") format('truetype');
}

.templatebody{
    background-color: white !important;
}
.network-wrapper-config * {
    font-family: OpenSans-Regular, sans-serif;
}
.body-content-jsp {
    margin-top: 35px;
    margin-left: 201px;
    margin-right: 0px;
    background-color: white;
}
.temporary-solution {
    height: 0px;
}
.sprite {
    background: url('../images/sprite.png') no-repeat;
    display: inline-block;
}
.modal-x {
    background-position: -198px -315px;
    width: 10px;
    height: 10px;
}
.modal-x:hover{
    background-position: -198px -338px;
}
.sprite.checkbox {
    background-position: -218px -335px;
    width: 14px;
    height: 14px;
}
.sprite.checkbox-checked {
    background-position: -218px -311px;
}
.sprite.checkbox-disabled {
    background-position: -218px -359px;
}
button {
    border-radius: 2px;
    font-size: 14px;
    line-height: 28px;
    height: 30px;
}
button.blue {
    border: #0091c8 1px solid;
    background-color: #009fdb;
    color: white;
}
button.blue:hover {
    background-color: #1ec2ff;
    border-color: #0091c8;
}
button.blue:active {
    background-color: #0091c7;
    border-color: #006186;
}
button.blue[disabled] {
    background-color: rgba(5, 104, 174, 0.3);
    border-color: rgba(4, 113, 168, 0.3);
}
button.grey {
    color: #009FDB;
    background-color: #ffffff;
    border: 1px solid #009FDB;
}
button.grey:hover {
    background-color: #f8f8f8;
    border-color: #009fdb;
}
button.grey:active {
    background-color: #d8d8d8;
    border-color: #5a5a5a;
}
button.grey[disabled] {
    background-color: #f8f8f8;
    border-color: #d8d8d8;
    color: #cdcdcd;
}
button.white {
    border: #009fdb 1px solid;
    background-color: white;
    color: #009fdb;
}
input[type=checkbox] {
    display: none;
}
input[type=checkbox] + label {
    position: relative;
    padding-left: 2px;
    text-indent: 19px;
    line-height: 15px;
}
input[type=checkbox] + label::after {
    background: url('../images/sprite.png') no-repeat;
    display: inline-block;
    background-position: -218px -335px;
    width: 14px;
    height: 14px;
    padding-left: 21px;
    margin-right: 25px;
    line-height: 15px;
    color: #5a5a5a;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
}
input[type=checkbox] + label::after.checkbox {
    background-position: -218px -335px;
    width: 14px;
    height: 14px;
}
input[type=checkbox] + label::after.checkbox-checked {
    background-position: -218px -311px;
}
input[type=checkbox] + label::after.checkbox-disabled {
    background-position: -218px -359px;
}
input[type=checkbox]:checked + label::after {
    background: url('../images/sprite.png') no-repeat;
    display: inline-block;
    background-position: -218px -311px;
}
input[type=checkbox]:checked + label::after.checkbox {
    background-position: -218px -335px;
    width: 14px;
    height: 14px;
}
input[type=checkbox]:checked + label::after.checkbox-checked {
    background-position: -218px -311px;
}
input[type=checkbox]:checked + label::after.checkbox-disabled {
    background-position: -218px -359px;
}
input[type=checkbox]:disabled + label::after {
    background: url('../images/sprite.png') no-repeat;
    display: inline-block;
    background-position: -218px -359px;
}
input[type=checkbox]:disabled + label::after.checkbox {
    background-position: -218px -335px;
    width: 14px;
    height: 14px;
}
input[type=checkbox]:disabled + label::after.checkbox-checked {
    background-position: -218px -311px;
}
input[type=checkbox]:disabled + label::after.checkbox-disabled {
    background-position: -218px -359px;
}
.network-wrapper-config {
    width: 100%;
}
.network-wrapper-config .head {
    line-height: 59px;
    height: 59px;
    display: flex;
    background-color: #F8F8F8;
    border-bottom: 1px solid #D8D8D8;
}
.network-wrapper-config .head  .title {
    font-size: 18px;
    margin-left: 56px;
    color: #5A5A5A;
}
.network-wrapper-config .head .btn-wrapper {
    flex: 1;
    text-align: right;
    margin-right: 15px;
}
.network-wrapper-config .head  .btn-wrapper button {
    width: 120px;
}
.network-wrapper-config .head  .btn-wrapper button.delete-btn{
    margin-left: 13px;
}
.network-wrapper-config .content-wrapper {
    display: flex;
}
.network-wrapper-config .content-wrapper .sidebar-right {
    width: 25%;
    min-width: 400px;
    background-color: #F8F8F8;
}
.network-wrapper-config .content-wrapper .content {
    width: 75%;
    margin-top: 48px;
}
.network-wrapper-config .content-wrapper .content .form-wrapper {
    width: 640px;
    margin: 0 auto;
}
.network-wrapper-config span.error {
    color: #cf2a2a;
}
.network-wrapper-config .content-wrapper .content .form-wrapper .instance-field .ng-invalid-pattern{
    border-color: #cf2a2a;
    color:  #cf2a2a;
}
.network-wrapper-config .content-wrapper .content .form-wrapper .instance-field {
    margin-bottom: 25px;
}
.network-wrapper-config .content-wrapper .content .form-wrapper .instance-field label{
    color: #191919;
    font-size: 13px;
}

.network-wrapper-config .content-wrapper .content .form-wrapper .instance-field input,
.network-wrapper-config .content-wrapper .content .form-wrapper .instance-field select{
    border-color: #D2D2D2;
}

.network-wrapper-config .content-wrapper .content .form-wrapper .instance-field.lcpRegionText,
.network-wrapper-config .content-wrapper .content .form-wrapper .instance-field.productFamily{
    display: none;
}

.sidebar-right service-metadata .metadata-content{
    padding-bottom: 20px;
}