html {
    overflow: hidden;
}
body {
    margin: 0;
    background-color: white;
    min-width: 1100px;
}

#container {
    /*border: 1px solid black;*/
    height: 100vh;
    top: 0px;
    margin-top: -10px;
    width: 100%;
    z-index: 0;
}

.submaterial { font-size: 80% }

.selectedSubmaterial { color: green }

.selectedElement { color: green }

body { height: 100% }

.materials-edit-container {
    height:100%;
    overflow-y:scroll;
    overflow-x:hidden;
}


.body-content { padding-left: 15px }

.dl-horizontal dt { white-space: normal }

input, select, textarea { max-width: 280px }

.container {
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .container { width: 750px }
}

@media (min-width: 992px) {
    .container { width: 970px }
}

@media (min-width: 1200px) {
    .container { width: 1170px }
}

.Panel { float: left }

.button {
    height: 100px;
    width: 100px
}

.View {
    float: left;
    height: auto;
    position: relative;
    width: 100%;
}

.Model {
    float: left;
    height: auto;
    margin-left: 5px;
    position: relative;
    width: 64%;
}

.Makers {
    float: left;
    height: auto;
    overflow-y: scroll;
    width: 520px;
}

.button2 {
    height: 100px;
    width: 150px;
}

.navcontainer ul {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 34%;
    text-align: center;
   
}

.navcontainer ul li { display: inline }

.navcontainer ul li a { }

.navcontainer ul li a:hover { }

.navcontainer {
    display: inline;
    /*float: left;*/
    /*padding-left: 25px;*/
    width: 19%;
     float: right;

}
                                                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                   
.navbar-collapse2 ul {
    height: 100%;
    /*margin: 0;*/
}

.navbar-collapse2 ul li { display: inline; }

    .navbar-collapse2 ul li img {
        height: 14px;
        margin-right: 11px;
        margin-top: -10px;
    }

.navbar-collapse2 {
    display: inline;
    float: right;
    height: 58px
}

.logo {
    float: left;
    /*height: 3em;*/
    margin-left: 60px;
    width:67px;
    /*width: 5em;*/
}

.navcontainer2 ul {
    display: inline;
    list-style-type: none;
    text-align: center;
}

.navcontainer2 ul li {
    display: inline;
    padding-left: 10px;
    padding-right: 10px
}

.navcontainer2 {
    background-color: #e5e1df;
    float: left;
    width: 100%;
}

.SmallPicture { width: 60px }

.BigPicture { width: 24% }

.borderimg { width: 96% }

.Items {
    height: 70px;
    overflow-y: scroll
}

.borderimg2 {
    height: 160px;
    width: 42px;
}

.Save_button { float: right }

.navcontainer-half {
    float: left;
    width: 242px
}

.navcontainer-half2 {
    float: right;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 242px;
}

.SmallPictureBlue {
    background: blue;
    color: blue;
    display: inline-block;
    height: 43px;
    width: 13%;
}

.SmallPictureRed {
    background: red;
    display: inline-block;
    height: 43px;
    width: 13%;
}

.SmallPictureYellow {
    background: #ff0;
    display: inline-block;
    height: 43px;
    width: 13%;
}

.SmallPictureGrey {
    background: grey;
    display: inline-block;
    height: 43px;
    width: 13%;
}

.SmallPictureBlack {
    background: #000;
    display: inline-block;
    height: 43px;
    width: 13%;
}

.SmallPicturePurple {
    background: purple;
    display: inline-block;
    height: 43px;
    width: 13%;
}

.SmallPictureGreen {
    background: green;
    display: inline-block;
    height: 43px;
    width: 13%;
}

.Colors {
    display: inline;
    width: 100%;
}

.Colors ul li { }

.Makers_list {
    height: 110px;
    margin-bottom: 10px;
    overflow-y: scroll;
}

.menucontainer {
    top: 89%;
    left: 37%;
    position: absolute;
    margin: 0;
    padding:0;
    text-align: center;
    width: 600px;
    height: 100px;
    /*z-index: 1;*/
}

#menucontainer-img {
    top: 93%;
    left: 42%;
    position: absolute;
    margin: 0;
    padding:0;
    text-align: center;
    display: none;
    /*z-index: 1;*/
}

#slider {
    top: 93%;
    left: 42%;
    position: absolute;
    margin: 0;
    padding:0;
    text-align: center;
    /*z-index: 1;*/
    width: 300px;
    background: black;
    height: 3px;
}

.ui-slider-range-min {
    background: #40cbea !important;
}

.ui-slider-handle {
    background: #40cbea !important;
    border-color: #40cbea !important;
    background: #40cbea !important;
    height: 15px !important;
    width: 15px !important;
    top: -7px !important;
    border-radius: 36px !important;
    cursor: pointer !important;
}

.ui-state-focus {
    outline: none;
}

/*-------------------- Main UI part ------------------*/

.style-header {
    z-index: 2;
    background-color: white;
    padding-top: 14px;
    padding-bottom: 14px;
    /*position: fixed;*/
}
.top-left {
    width: 335px;
    height: 100%;
    float: left;

    display: -webkit-flex !important;
    display: flex !important;
    align-items: center !important;
    -webkit-align-items: center !important;
}
.top-center {
    display: -webkit-inline-flex !important;
    display: inline-flex !important;
    overflow:hidden;
    align-items: center !important;
    -webkit-align-items: center !important;
    height: 100%;
    /*width: 50%;*/
}
.top-right {
    width: 335px;
    height: 100%;
    float: right;

    display: inline-flex !important;
    display: -webkit-inline-flex !important;
    align-items: center !important;
    -webkit-align-items: center !important;
    justify-content: flex-end !important;
    -webkit-justify-content: flex-end !important;
}

.top-margins {
    margin-top: 4px;
    margin-bottom: 4px;
    height: 68px;
}

.bordered-panel-left {
    border-style: solid;
    border-right: solid 0.12em #848384 !important;
    border: none;
}
.bordered-panel-right {
    border-style: solid;
    border-left: solid 0.12em #848384 !important;
    border: none;
}

.search-input {
    /*background: url(/Content/Img/search.svg) no-repeat center left 5px #FFF;*/
    text-align: left;
    padding: 10px;
    font-family: 'AcromMedium', opentype;
    color: #979797;
    border: 3px solid #FFF;
    outline: none;
    width: 270px;
    vertical-align: middle;
    font-size: initial;
}

 ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #979797;
}
 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #979797;
   opacity:  1;
}
 ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #979797;
   opacity:  1;
}
 :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #979797;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #979797;
}


button:focus {
    outline: 0;
}

.menu-label {
    position:absolute;
    color:white;
    font-family: 'AcromBold', opentype;
    font-size: 20px;
    display:inline-block;
    width:168px;
    height:inherit;
    top:8px;
    text-align:center;
    opacity:1;
    transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -webkit-transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
    outline:0;
    z-index:10;
}
    .menu-label.menu-label-selected {
        opacity:1;
        font-size:28px;
        top:0px;
        z-index:10;
    }
        .menu-label.menu-label-selected:hover {
            opacity:0.75;
        }
    .menu-label:hover {
            opacity:0.75;
        }
    .menu-label.menu-label-unselected {
        opacity:0;
        z-index:inherit;
    }

    .menu-label.menu-first-label {
        left:33px;
    }
    .menu-label.menu-second-label {
        left:229px;
    }
    .menu-label.menu-third-label {
        left:419px;
    }

.menu-image {
    width: 10px;
    height: 10px;
    opacity: 0;
    display:inline-block;
    margin-left:82px;
    transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -webkit-transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
    .menu-image.show-image {
        opacity:1;
        width:20px;
        height:20px;
    }
    
.menu-element-image-container {
    position:absolute;
    width:168px;
    height:inherit;
    display:inline-flex;
    top:3px;
    height:29px;
    z-index:10;
}
    .menu-image.show-image:hover {
        opacity:0.75;
        outline:0;
    }
    .menu-element-image-container#firstTuple {
        left:21px;
    }
    .menu-element-image-container#secondTuple {
        left:211px;
    }
    .menu-element-image-container#thirdTuple {
        left:404px;
    }

.blue-panel {
    width: 100%;
    height: 68px;
    background: #40cbea;
}
.blue-panel-small {
    width: 100%;
    height: 10px;
    background: #63a9b6;
}

.top-container {
    height: 40px;
}

.top-right-image {
    width: 260px;
    float: right;
    display: inline-flex;
    display: -webkit-inline-flex;
}

.blue-panel-contents {
    height: 45px;
    display:block;
    position:relative;
    width:600px;
    /*display: flex;
    display: -webkit-flex;*/
    padding-left: 20px;
        /*margin-top: 6%;*/
}

.hidden {
    display: none;
}


#elementLabel {
    color: white;
    font-size: 26px;
    font-family: 'AcromMedium', opentype;
    line-height: 32px;
    min-width: 100px;
    font-weight: bold;
}

.elementContainer {
    width: 100px;
    margin-right: 80px;
}

.right-margin-60 {
    margin-right: 100px;
}

.breadcrumbsLabel {
    color: black;
    font-size: large;
    font-family: 'PFEncoreSansPro-Book', opentype;
    margin-right: 20px;
    text-decoration: none;
}

.breadcrumbsArrow {
    color: black;
    font-size: large;
    font-family: 'PFEncoreSansPro-Book', opentype;
    margin-right: 20px;
}

#breadCrumbsLevel2, #breadCrumbsLevel3 {
    display: none;
}

.panel-about {
    background-color: #f7f7f7;
    position: fixed;
    right: -394px;
    height: 100%;
    width: 394px;
    margin-top: -8.5em;
    float: right;
    z-index: 3;
    box-shadow: 0 0 7px #999999;
}

/*** Products panel ***/
.panel-products {
    background-color: #f7f7f7;
    position: absolute;
    top: 0;
    height:100%;
    left: 0;
    width: 394px;
    /*margin-top: 1.2em;*/
    z-index: 0;
    float:right;
   /* box-shadow: 0 0 7px #999999;*/
}

.top-products {
    height: 55px;
    box-shadow: 2px 0 0 #d8d8d8;
}

.middle-products {
    height: 88px;
    box-shadow: 2px 0 3px #d8d8d8;
}

.list-products {
    /*height: inherit;*/
    overflow-y: auto;

}

.product-container {
   /* height: 100%;*/
    overflow-y: auto;
}

.labelProducer {
    font-size: large;
    border-radius: 25px;
    font-family: 'AcromMedium', opentype;
    line-height: 55px;
    margin-left: 5%;
    padding: 3px 15px;
}

.labelProducerCurrent {
    font-size: large;
    border-radius: 25px;
    font-family: 'AcromMedium', opentype;
    line-height: 88px;
    margin-left: 5%;
    padding: 3px 15px;
}

.marine-color-background {
    background: #91ddef;
}

.pink-color-background {
    background: #f980b9;
}

.green-color-background {
    background: #78cebd;
}

.product {
    padding: 5px 10px 5px 20px;
    display: -webkit-flex;
    justify-content: space-between;
    cursor: pointer;
    
    height:60px;
    -webkit-transition: all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    margin-top:0px;
    border: 1px solid transparent;
}
    .product:hover {
        background:#e7eded;
    }
    .product.product-selected {
        background: #31c5dd;
        border-top: 3px solid #f7f7f7;
        border-bottom: 3px solid #f7f7f7;
    }
    .product.product-expanded {
        height:90px;
        
    }
    .product.product-last-selected {
        background:#ebebeb;
    }


.product div label {
         cursor: pointer;
     }

.product-type {
    font-size: 14px;
    color: #808080;
}
.product-name {
    font-size: 19px;
}
.product-addon {
    font-size: 19px;
    color: #b3b3b3;
}
.acrom {
    font-family: 'AcromMedium', opentype;
}

.acromLight {
    font-family: 'AcromLight', opentype;
}

.product-selected-panel {
    height: 32px;
    margin: 0 10px 0 14px;
    /*left: 82%;
    position: absolute;*/
}

.product-selected-more {
    height: 21px;
    margin: 7.5px 0 0 10px;
    /*left: 90%;
    position: absolute;*/
}

.product-list {
    padding: 0;
    margin: 0 0 55px 0;
   /* overflow-y: scroll;
    height: 99%;*/
}

.material-div {
    margin: auto;
    margin-left: 0;
    display: inline-flex;
    display: -webkit-inline-flex;
    width: 100%;
    justify-content: space-between;
}
.product-div {
    margin: auto;
    margin-left: 0;
    display: inline-flex;
    display: -webkit-inline-flex;
    width: 100%;
    position: relative;
    height:inherit;
}
.product-left {
    position:absolute;
    left:0;
    top:10px;
    width: 350px;
    background:inherit;
}

.product-right {
    display: block;
    position: absolute;
    left:0px;
    top:14px;
    width: 20px;
    transition:left 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition:top 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);;
}

    .product-right.ng-hide {
        top:-30px;
    }
/*** Product panel End***/

/*** Products panel ***/
.panel-materials-edit {
    background-color: #f7f7f7;
    position: fixed;
    left: 0;
    height: 100%;
    width: 335px;
    margin-top: 0;
    float: left;
    z-index: 0;
    box-shadow: 0 0 7px #999999;
}






.labelMaterialsEdit, .k-content, .k-upload {
    height: 100% !important;
}

.top-materials-edit-top {
    height: 45px;
    box-shadow: 2px 0 0 #d8d8d8;
}

.top-materials-edit {
    height: 75px;
    box-shadow: 2px 0 0 #d8d8d8;
}

.k-upload-button {
    cursor: pointer !important;
}

.materials-edit-element {
    float: right;
    width: 100%;
    margin-top: 5px;
    display: inline-flex;
    margin-right: 10px;
}

.editor-field {
    float: right;
    width: 100%;
    margin-top: 5px;
    display: inline-flex;
}

.k-upload-files {
    margin: -128px 0 .6em !important;
}

.k-dropzone .k-upload-status {
    display: none;
}

.k-file-error .k-progress {
    background-color: #cdffd2 !important;
}

.k-popup .k-list .k-state-hover, .k-popup .k-list .k-state-focused, .k-popup .k-list .k-state-selected {
    background: transparent !important;
}

.material-left {
    width: 260px;
    display: inline-flex;
    justify-content: space-between;
}

.k-dropdown {
    width:140px !important;
    float: right;
}

.material {
    height: 27px;
    padding: 5px 10px 5px 20px;
    display: -webkit-flex;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 6px;
}

.top-left-materials,
.top-left-submaterials {
    width: 315px;
    height: 100%;
    float: left;

    display: -webkit-flex !important;
    display: flex !important;
    align-items: center !important;
    -webkit-align-items: center !important;
}

.editor-label {
    width: 250px;
    float: left;
    margin: auto;
}

.k-colorpicker {
    width: 100% !important;
}

.material-select-div {
    height: 65px;
}

.dropdownSpecular.k-dropdown .k-dropdown-wrap {
    height: 30px;
}

.dropdownSpecular .k-colorpicker .k-picker-wrap {
    height: 30px;
}

.k-i-arrow-s {
    margin-top: -15px;
}

.k-selected-color {
    height: 24px !important;
}

.k-upload-button {
    float: right;
    margin-right: -3px;
}

span.k-input{
    margin-top: -5px !important;
}

/*** Product panel End***/

/*** Menu Start***/
.menu-about-top {
    
}

img.close-image.clickable:hover {
    border-radius: 25px;
    border-color: #cccdc9;
    background: #cccdc9;
}

img.menu-image.showMenu.clickable:hover {
    background: url(/Content/Img/rounded_corners.png) no-repeat center;
}

.menu-image.showMenu {
    padding: 16px;
}

.list-none {
    list-style-type: none;
}

.menu-about-top-list {
    padding: 0;
    position: absolute;
    top: 30px;
    left: 20px;
    font-family: 'AcromMedium', opentype;
    font-size: 29px;
    font-weight: bold;
}

.menu-about-bottom {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-family: 'AcromMedium', opentype;
    color: #222222;
}

.clickable {
    cursor: pointer;
    outline:0;
}

.menu-about-element {
    margin-top: 18px;
}
/*** Menu End***/

/*** Materials Menu Start***/
.ul-materials {
    color: white;
    font-family: 'AcromMedium', opentype;
    font-size: 17px;
    font-weight: bold;
    padding: 25px 0 0 0;
    width:calc(100% / 3);
    display: inline-block;
    max-width: 300px;
    -moz-min-width: 203px;
    -ms-min-width: 203px;
    -o-min-width: 203px;
    -webkit-min-width: 203px;
    min-width: 203px;
}

.li-materials {
    margin-top: 25px;
    padding-left: 10px;
}

.container-materials {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    margin-left: -6px;
}

.container-submaterials {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    margin-left: -6px;
}

.container-search {
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

.icon-material {
    width: 20px;
    height: 20px;
    display: block;
}

.div-icon {
    display: inline-block;
    height: 20px;
    width: 20px;
}
.div-label {
    display: inline-block;
    width: 80%;
    padding-left: 10px;
    cursor: pointer;
}
.div-icon-search {
    display: inline-block;
    height: 20px;
    width: 20px;
}
.div-label-search {
    display: inline-block;
    width: 50%;
    padding-left: 10px;
    color: #919191;
    cursor: pointer;
}

.empty-icon {
    display: none;
}

.hidden {
    visibility: hidden;
}

.back-search {
    margin-left: 155px;
}
/*** Materials Menu End***/

/*** Search Menu Start***/
.li-search {
    margin-top: 5px;
    margin-bottom: 20px;
    padding-left: 10px;
    width: 280px;
}

.ul-search{
    color: white;
    font-family: 'AcromMedium', opentype;
    font-size: 17px;
    font-weight: bold;
    padding: 0 0 0 30px;
    width: 33%;
}
/*** Search Menu End***/

.close-image {
    float: right;
    margin: 10px;
    cursor: pointer;
    padding: 4px;
}

.close-image-top {
    float: right;
    margin: 20px 10px 10px 10px;
    cursor: pointer;
    padding: 4px;
}

.close-image-top:hover {
    border-radius: 25px;
    border-color: #52dafd;
    background: #52dafd;
}

.close-image:hover {
    border-radius: 25px;
    border-color: #52dafd;
    background: #52dafd;
}

.top-menu-materials {
    background-color: #539496;
    position: fixed;
    top: -156px;
    width: 100%;
    height: 312px;
    z-index: -1;
    box-shadow: 0 0 10px #999999;
    display: none;
}

.top-menu-submaterials {
    background-color: #60a9b5;
    position: fixed;
    top: -166px;
    width: 100%;
    height: 312px;
    z-index: -1;
    box-shadow: 0 0 10px #999999;
    display: none;
}

.top-menu-search {
    background-color: #f5f5f5;
    position: fixed;
    top: 67px;
    width: 100%;
    height: 1px;
    z-index: 0;
    display: none;
    box-shadow: 0 0 6px #cccccc;
}

#breadcrumbs {
    background-color: transparent;
    position: fixed;
    top: 156px;
    height: 50px;
    z-index: 0;
}

#breadcrumbs div {
}

.round-image {
    border-radius: 25px;
    border-color: #94e2f4;
    background: #94e2f4;
    padding: 3px;
}

strong, b {
    font-weight: bolder;
    color: #0f0f0f;
}


md-dialog-content {
    padding: 20px !important;
}


md-dialog {
    max-width: 100% !important;
}




.k-list-container{
    min-width:126px !important;
    width: auto!important;
}
.k-list
{
    width:auto !important;
}

/*Scroll classes*/

.track4 {
    width: 7px;
    /**/background-clip: padding-box;
    background: #f7f7f7;
    /*border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-left-width: 1px;*/
}

.track4.dragging,
.track4:hover {
    background: #f7f7f7; /* No RGBA support */
    /*-webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);*/
}

.track4:active {
    background: #f7f7f7; /* No RGBA support */
    /*-webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
                        inset -1px -1px 0 rgba(0, 0, 0, 0.07);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
                inset -1px -1px 0 rgba(0, 0, 0, 0.07);*/
}

.handle4 {
    width: 10px;
    background-clip: padding-box;
    background: #ccc; /* No RGBA support */
    background: rgba(0, 0, 0, 0.2);
    /*-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
                        inset 0 -1px 0 rgba(0, 0, 0, 0.07);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
                inset 0 -1px 0 rgba(0, 0, 0, 0.07);*/
}

.handle4:hover {
    background: #999; /* No RGBA support */
    background: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
}

.dragging .handle4,
.handle4:active {
    background: gray; /* No RGBA support */
    background: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
}

.subscribe-button {
    min-width:81px;
    height:35px;
    text-align:center;
    display: inline-block;
    color: white;
    font-family:'AcromMedium';
    background-color:#383e49;
    font-size:12px;
    line-height:2.9em;
    border-radius:3px;
    cursor:pointer;
    outline:0;
    padding-left:15px;
    padding-right:15px;
}
    .subscribe-button:hover {
       background-color:#272d38; 
    }


.md-input-focused label
{
    color:#35cbed !important;
}

.md-input-focused .md-input
{
    border-color: #35cbed !important;
}