@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);

.container{
    /*display:flex;
    flex-direction: column;
    ;*/
    height: 100vh;
        
}

.no-scroll{
    pointer-events: none;
    overflow-y:hidden !important;
}

.sight-autocomplete{
    position: absolute;
    top:100%;
    background-color:#fff;
    z-index:2;
    list-style-type: none;
    width:100%;
}

.priority-nav .sight-autocomplete{
    width:calc(100% - 7px);
}

.sight-autocomplete li{
    color: #3e4545;
    font-family: 'Roboto', sans-serif;
    line-height:40px;
    width:100%;
    overflow:hidden;
    white-space: nowrap;
    border-bottom:1px solid #b0b0b0;
    height:60px;
    overflow:hidden;
    font-size:16px;
    display:flex;
    flex-direction: row;
}

.sight-autocomplete li .result-main{
    flex-grow:1;
}

.sight-autocomplete li img{
    width:80px;
    margin-right:5px;
}

.sight-autocomplete li .set-serial{
    font-size:12px;
    display:block;
    line-height:12px;
    margin-top:5px;
}

.sight-autocomplete li .set-title{
    line-height:16px;
    margin-top:5px;
    white-space: normal
}

.sight-autocomplete li:not(.spinner-container):hover{
    background-color: #f3ea3c;
    border-color: #f3ea3c;
    cursor: pointer;
}

.sight-autocomplete li.spinner-container{
    height:35px;
    align-items: center;
    justify-content: center;
}

#notif-container{
    position:fixed;
    top:60px;
    left:0;
    width:100%;
    left: 50%;
    transform: translateX(-50%);
    z-index:1001;
}

#notif-container .alert{
    margin:1rem;
    margin-bottom:0;
    border-radius:0;
}

.spinner-container{
    padding-top:6px;
}

html, body{
    height:100%;
}

#left-panel .match-navbar{
    display:flex;
}

#left-panel .match-navbar .set-search-group{
    margin-top: -0.5rem;
}

#left-panel .match-navbar .match-nav{
    margin: 0 -10px;
}

#left-panel .match-navbar .match-nav .dropdown-toggle{
    padding-right:0;
}

#right-panel .match-navbar{
    display:none;
}

.set-navbar .navbar-nav .nav-link{
    color: #fff;
}

.set-navbar .navbar-nav .nav-link:hover,
.set-navbar .navbar-nav .nav-link:focus{
    color:#fff;
    text-decoration:underline;
}

.set-navbar .priority-nav{
    width:100%;
    position:relative;
    display:flex;
}

.set-navbar .match-nav{
    flex-grow:1;
    display:flex;
    flex-direction:row;
    align-items:center;
}

.set-navbar .match-nav .dropdown{
    display:flex;
    flex-direction: row;
    align-items: center;
    flex-grow:1;
}

.set-navbar .match-nav .dropdown-toggle{
    background-color:inherit;
    text-transform: none;
    border:0;
    overflow: hidden;
}


.set-navbar .match-nav .dropdown-toggle::after{
    width:14px;
    height:10px;
    border: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' version='1.1' width='10' height='16' aria-hidden='true'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath fill-rule='evenodd' class='st0' d='M5 11L0 6l1.5-1.5L5 8.25 8.5 4.5 10 6l-5 5z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat:no-repeat;
    vertical-align: 0.1em;
}


.set-navbar .navbar-nav a{
    color:#fff;
    font-size:18px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;
}

.set-navbar .set-logo{
    background-color:#f3ea3c;
    color:#3e4545;
    height:60px;
    width:88px;
    /*margin: -0.5rem 0 0 -1rem;*/
    margin: 0 0 0 -1rem;
    position: relative;
}

.set-navbar .set-logo .set-logo-title{
    position: absolute;
    bottom:6px;
    left:6px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-size:14px;
    line-height:14px;
    font-weight: 700;
}

.set-navbar .set-logo .logo-mask{
    position: absolute;
    width:76px;
    height: 30px;
    top:8px;
    left:6px;
    overflow:hidden;
}

.set-navbar .set-logo .set-logo-image{
    position: absolute;
    width:76px;
    height: 76px;
    top:0px;
    left:0px;
    -webkit-animation:spin 30s linear infinite;
    -moz-animation:spin 30s linear infinite;
    animation:spin 30s linear infinite;
}

.set-navbar .set-logo .set-logo-image.set-logo-thinking{
    -webkit-animation:spin 10s linear infinite;
    -moz-animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


.set-navbar .set-main-actions{
    display:flex;
    flex-flow:row nowrap;
    flex-grow:1;
    position: relative;
}

.btn{
    text-transform: uppercase;
    border-radius: 0;
    font-size: 16px;
}

.btn-secondary{
    background-color:#3d4543;
}

.brick-btn{
    background-color: #f3ea3c;
}

.green-btn{
    background-color: #208b4c;
    color:#fff;
}

.green-btn:hover{
    color:#fff;
}

.match-sets-btn,
.grey-btn{
    background-color:#f3f3f3;
    color:#3e4545;
    text-decoration: none;
}

.set-navbar .match-sets-btn{
    height:40px;
}

.btn-sm{
    font-size: 0.7875rem;
}
.set-navbar .set-main-actions .autcomplete-search{
    position:relative;
    flex-grow:1;
}

.set-navbar .set-search-group{
    position: relative;
    height: 60px;
    margin: 0;
    padding:0;
    min-width:230px;
    flex-grow:1;
}

.set-navbar .set-search-group label{
    position: absolute;
    bottom: 2px;
    font-size:12px;
    color:#fff;
    width:100%;
    justify-content: left;
}

.set-navbar .set-search-group input{
    /*height:30px;*/
    top: 9px;
    padding:0.375rem 0;
    position:absolute;
    width:100%;
    font-size:18px;
    color:#f3ea3c;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;
    margin:0;
    background: transparent;
    border: none;
    border-bottom:1px solid #f3f3f3;

}

.set-navbar .set-search-group input:focus{
    outline: none;
}

.set-navbar .set-search-group input::placeholder{
    color: #a8a540;
    /*color:#f3ea3c;*/
    opacity: 1;
}

.set-navbar .navbar-collapse{
    flex-grow:0;
}


/* Set container */
.sets-container{
    border-right: 1px solid #f0f0f0;
}

.sets-container .set-card{

    position:relative;
    margin-top:15px;
    font-family: 'Roboto', sans-serif;
    /*border-right: 1px solid #d1d1d1;*/
    border-bottom: 1px solid #d1d1d1;
    min-height:170px;
}

.sub-card .set-card{
    margin-top:0;
    border-bottom:0;
}

.sets-container .suggested-card{
    border-color:#abd3bc;
}

.sets-container .set-card .set-images{
    width:230px;
    height: 100%;
    min-height:170px;
    float:left;
    overflow:hidden;
    position: relative;
}

.sets-container .set-card .set-images{
    width:220px;
}

.sets-container .set-card .set-images img{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sets-container .set-card .set-images img.wide {
    width:100%;
}
.sets-container .set-card .set-images img.tall {
    height:100%;
}

.sets-container .set-card .item-info{
    position:relative;
    padding:5px 0 5px 5px;
    overflow:hidden;
    height:100%;
    
}


.item-top{
    position: absolute;
    top:5px;
    right:0;
    height:21px;

    display: flex;
    flex-direction: row-reverse;
    overflow: visible;
    white-space: nowrap;
}

.set-bottom{
    /*position: absolute;
    bottom: 5px;
    left: 5px;*/
    position:relative;
    display:flex;
    flex-direction:row;
    min-height:36px;
    max-width:100%;
}


.sets-container .set-card .item-top a,
.sets-container .set-card .item-top span{
    float:right;
    margin-left:5px;
    height:21px;
    line-height:21px;
}

.sets-container .item-top .item-remove{
    background-color: #f32837;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size:14px;
    text-shadow: 1px 1px #c5202d;
    width: 21px;
    text-align: center;
    display:block;
}

.sets-container .item-top .item-status{
    text-transform: uppercase;
    color: #3e4545;
    font-size:10px;
    font-weight:700;
    background-color:#f3f3f3;
    padding:0 5px;
    position:relative;
}

.sets-container .item-top .item-status .spinner-border-sm{
    height:1rem;
    float:left;
    margin: 2px 5px 0 0;
}

.suggested-card .item-top .item-status{
    background-color:#208b4c;
    color:#fff;
}

.sets-container .item-top .item-count{
    text-transform: lowercase;
    font-size:12px;
    color: #111212;
}

.set-middle{
    margin-top:26px;
    width:100%;
    height:97px;
}

.set-title-wrapper{
    display:flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    width:100%;
}

.sets-container-bg{
    background-color:#fff;
    flex:1 1 auto;
    height:calc( 100vh - 60px ); /*footer*/
}



.sets-container .item-number,
.sets-container .item-title,
.sets-container .set-complete,
.sets-container .item-alternative{
    font-size:16px;
    padding: 4px 7px;
    /*flex: 0 0 content;*/
    white-space: nowrap;
    position:relative;
}

.sets-container .item-number{
    background-color:#3e4545;
    color:#fff;
    margin-right:5px;
}

.sets-container .item-title{
    background-color: #f3ea3c;
    color: #3e4545;
    text-overflow: ellipsis;
    overflow: hidden;
    flex:1;
}

.sub-card .set-card{
    display:flex;
}

.sub-card .item-title{
    text-overflow: unset;
}

.sub-card .item-top .item-remove{
    overflow:unset;
}

.sub-card .set-card .item-info{
    overflow:unset;
    flex-grow:1;
}

.sets-container .item-alternative{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' version='1.1' width='10' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M5 11L0 6l1.5-1.5L5 8.25 8.5 4.5 10 6l-5 5z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-color: #f3ea3c;
    margin-left:1px;
    padding: 4px 6px 9px 7px;
    background-position: 6px 16px;
    transition: 0.2s;
    cursor: pointer;
    font-size:13px;
}

.sets-container .item-alternative:hover{

    background-position: 6px 18px;
}

.sets-container .set-complete{
    background-color:#208b4c;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' style='enable-background:new 0 0 1000 1000;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M444,11.3C334.6,24.7,235.4,72,156.3,148.6C93.4,210,45.2,293,23.9,377.5C12.1,424.2,10,442.5,10,500.7 c0.2,58,1.9,73.8,14.1,121.4C48.4,718.5,106,810,182.5,874.2c181.3,151.9,440,154.8,624,7.7c115-92.1,183.4-234.6,183.4-382 C990,294.1,861.4,110,667.7,38.1c-23.7-8.7-62.5-18.8-91.5-23.9C552.4,10.2,468.8,8.3,444,11.3z M532.7,106 c58.4,3.4,126.3,26.4,179.8,61c93.4,60.6,155.7,154,176.4,264.7c5.3,27.9,6.4,89.6,2.1,119.9c-12.8,91.1-52.7,169.3-118.8,232.9 c-63.6,61-139.5,96.8-228.6,107.9c-26.2,3.2-87.2,1.5-112.2-3.2c-154-28.6-276-141.2-314.8-290.5c-16.9-64.8-16-143.5,2.1-206.7 c46.3-160.8,188.8-276.2,354-286.6c13-0.9,27.3-1.3,32-1.1C509.5,104.7,522.1,105.5,532.7,106z'/%3E%3Cpath class='st0' d='M209.1,490c0,0,188.2,193.9,199,198.4c5.1,2.1,11.7,3.1,18.4,3.1c7.5,0,15.1-1.4,20.7-4 c5.8-2.8,56.5-52,160.2-156.1C749.2,389.2,767.7,366,767.7,366l-33.8-40l-22.7-26.4c0,0-80.2,74-152.5,146.3L427,577.5l-59.1-59.1 c-32.6-32.4-78.9-77-82.7-78.9'/%3E%3C/svg%3E%0A");    color:#fff;
    margin-left:5px;
    border:0;
    background-position:center;
    background-repeat:no-repeat;
    background-size:20px 20px;
    width:33px;
    height:33px;
    font-size:0;
    display: block;
}

.sets-container .set-description{
    margin-top:5px;
    font-size:12px;
    line-height: 12px;
    color:#3e4545;
    text-align: justify;
    width: auto;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom:0px;
}

.sets-container .set-instructions{
    font-size:16px;
    text-transform: uppercase;
    color:#3e4545;
    font-size:14px;
    background-color:#f3f3f3;
    padding: 4px 7px;
    margin:1px 1px 0 0;
}

.sets-container .set-instructions:hover{
    text-decoration:none;
    background-color:#dadada;
}

.set-instructions-container{
    word-break:break-all;
    position:relative;
    flex-grow:1;
}

.set-instructions-title{
    display:block;
    font-size:10px;
    line-height:12px;
    text-transform:uppercase;
    padding-left:10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath style='line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal' d='M 7 2 L 7 9.2929688 L 4.3535156 6.6464844 L 3.6464844 7.3535156 L 7.5 11.207031 L 11.353516 7.3535156 L 10.646484 6.6464844 L 8 9.2929688 L 8 2 L 7 2 z M 3 13 L 3 14 L 3.5 14 L 11.5 14 L 12 14 L 12 13 L 11.5 13 L 3.5 13 L 3 13 z' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: 0px 1px;
}

.set-stores{
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.set-stores a{
    font-family: 'Roboto', sans-serif;
    font-family:16px;
    text-transform: lowercase;
    color:#3e4545;
    line-height:21px;
    padding-left:18px;
    margin-right:5px;
    background-repeat: no-repeat;
    background-size:15px 15px;
    background-position:0 3px;
}

.suggested-card .set-stores a{
    color:#208b4c;
}

.set-stores a.amazon-store,
.abtn{
    background-image:url('/img/amazon-logo.png');
}

.set-stores a.ebay-store{
    background-image:url('/img/ebay-logo.png');
}

.suggested-card .set-stores a.amazon-store{
    background-image:url('/img/amazon-s-logo.png');
}

.suggested-card .set-stores a.ebay-store{
    background-image:url('/img/ebay-s-logo.png');
}


.set-navbar{
    margin-left:-15px;
    margin-right:-15px;
    z-index:100;
    height: 60px;
    background-color:#3d4543;
    
}

.main-navbar{
    padding-top:0;
    padding-bottom:0;
}

.set-navbar .navbar-toggler{
    position:absolute;
    top:100%;
    left:19px;
    border-radius: 0;
    border: 0;
    background-color:#f3ea3c;
    padding-top:0;
}
.set-navbar .navbar-toggler:focus{
    outline: none;
}

.set-navbar .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1em;
    vertical-align: top;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4'/%3e%3c/svg%3e");

}

.top-navigation{
    display:block;
    height:60px;
}

.set-footer{
    background-color:#fff;
    text-align: center;
    font-size:12px;
    font-family: 'Roboto', sans-serif;
    padding-top:20px;
    height:60px;
}

.set-footer .brick-flea-footer{
    display:block;
}

.set-footer .brick-flea-footer a{
    color:#3d4543;
}

.set-footer .brick-flea-footer a:hover{
    text-decoration:underline;
}

.set-footer .lego-legal{
    font-size:10px;
}

.bigger-screen{
    display:none;
}

.smaller-screen{
    display:flex;
}


.cookie-consent{
    display:block;
    position: fixed;
    bottom:15px;
    background-color:#f3ea3c;
    font-family: 'Roboto', sans-serif;
    padding:10px;
    font-size:15px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index:1001;
}

.cookie-consent .cookie-consent__message{
    margin-right:20px;
}

.main-side-panel{
    display:flex;
    flex-direction: column;
    height:100%;
}

.main-side-panel .set-type-annotation{
    position:absolute;
    top:50%;
    left:50%;
    font-size: 10vw;
    transform: translate(-50%, -50%);
    font-family:'Roboto', sans-serif;
    font-weight:700;
    color:#f7f7f7;    
    width:100%;
    text-align: center;        
}

.main-side-panel .set-type-annotation,
.set-logo,
.about-screen .set-card *
{    
    -webkit-user-select: none;  
    -moz-user-select: none;  
    -ms-user-select: none;    
    user-select: none;
    cursor:default;
}

.main-side-content{
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
    background-color:#fff;
}

.about-screen h1{
    background-color:#f3f3f3;
    color: #3d4543;
    font-weight:300;
    font-size:1.8rem;
    padding:13px;
}

.about-screen h2{
    color: #3d4543;
    font-weight:400;
    font-size:1.6rem;
    text-align:center;
    margin:15px 0 25px 0;
}

.about-screen .main-card{
    margin-bottom:10px;
}

.about-screen .main-card span.card-title{
    background-color:#3d4543;
    color:#fff;
    font-size:1rem;
    font-family:'Roboto', sans-serif;
    padding:11px;
    width:100%;
    display:block;
    margin-bottom:2px;
}

.about-screen .main-card .image-frame{
    border:5px solid #3d4543;
    overflow:hidden;
    max-height:200px;
}

.about-screen .card-item{
    display:flex;
    flex-direction: row;
    margin-bottom:10px;
    text-align: justify;
}

.about-screen .card-item .bullet-container{
    width:20px;
    display:flex;
    align-items: center;
    margin-right:5px;
    line-height:20px;
}

.about-screen .bullet-numbered{
    display:block;
    width: 20px;
    height: 20px;
    background: #3d4543; 
    color:#fff;
    font-size:12px;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px;
    text-align:center;
    border:1px solid #fff;
    text-align:center;
    flex-basis:20px;
}

#close-bullet{
    position:absolute;
    top:-18px;
    right:0;
}

#match-bullet{
    position:absolute;
    top:-18px;
    left: 50%;
    margin-left: -10px;
}

#complete-bullet{
    position:absolute;
    right:-18px;
    top:50%;
    margin-top:-10px;
}

#instructions-bullet{
    position:absolute;
    left:-18px;
    bottom:3px;
}

.about-screen .sub-card-container{
    display:flex;
    align-items: center;
}

.about-screen .sub-card{
    border:5px solid #f3f3f3;
    background-color: #fff;
    padding-right: 5px;
    width:100%;
    margin-bottom:10px;
}

.modal-header{
    background-color: #f8fafc;
    border-radius:0;
}

.modal-content {
    border-radius:0;
    background-color: #f3ea3c;
    font-family: 'Roboto', sans-serif;
    border:0;
}

.modal-footer{
    border-top-color:#3d4543;
}

.brick-form label,
.brick-form .field-error{
    background-color:#f3f3f3;
    font-family:'Roboto', sans-serif;
    font-size:16px;
    padding:3px 10px;
    margin:5px 5px 5px 0;
}

.brick-form .field-error{
    background-color:#f32837;
    color:#fff;
    display:inline-block;
}

.brick-form .input-field{
    height:40px;
    width:100%;
    background-color:#f3f3f3;
    padding:5px;
    margin-bottom:10px;
}

.brick-form input[type="submit"]{
    margin-bottom:10px;
}

.brick-form .input-field.big-height{
    height:110px;
}

.brick-form .input-field input[type=text],
.brick-form .input-field textarea{
    widtH:100%;
    height:100%;
    background-color: rgb(0,0,0,0);
    border:0;
    border-bottom:1px solid #3d4543;
    font-size:18px;
    padding: 0 5px;
}

.brick-form .input-field textarea{
    resize: none;
}

.brick-form .input-field.error-target input,
.brick-form .input-field.error-target textarea{
    border-bottom-color:#f32837;
}

.brick-form .input-field input[type=text]:focus,
.brick-form .input-field textarea{
    outline: none;
}

.brick-form .input-vertical-container{
    display:flex;
    flex-direction:column;
}

.brick-form .input-vertical-container .input-field{
    flex-grow:1;
}

.brick-form .input-horizontal-container{
    display:flex;
    flex-direction:row;
}

.brick-form .notification{
    display:none;
    padding:15px 30px;
    text-align:center;
    color:#fff;
    background-color:#208b4c;
}

.brick-form.submitted{
    text-align:center;
    margin:30px 0;
}

.brick-form.submitted .row{
    display:none
}

.submitted .notification{
    display:inline-block;
}

.brick-text{
    text-align: justify;
}

.brick-text a:not(.btn){
    text-decoration: underline;
    color: #3d4543;
}

.brick-text a:hover{
    text-decoration: none;
}

.about-screen *::selection
 {
    background-color:#212529;
    color:#f3ea3c;
}

.about-screen *::-moz-selection
 {
    background-color:#212529;
    color:#f3ea3c;
}

.brick-text-2{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
}

/*Banners*/
.banner-box{
    width:100%;
    position:relative;
    margin:15px 15px 0 0;
    height:120px;
}

.banner-box .brick-form{
    position: absolute;
    top:5px;
    left:5px;
    width: calc( 100% - 10px );
    height: calc( 100% - 10px );
}

.banner-box .close-btn {
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    width: 21px;
    text-align: center;
    display: block;
    font-weight:300;
    position:absolute;
    top:5px;
    right:5px;
}

.banner-box .close-btn:hover{
    font-weight: 700;
    text-decoration:none;
}

.banner-box h3{
    padding:7px 10px 3px 10px !important;
    font-size:16px;
    margin-top:0;
}

.banner-box .btn{
    font-weight:700;
}

.about-box{
    height:80px;
    background-color:#f3f3f3;
    background-image:url('/img/forklift.png');
    background-repeat:no-repeat;
    background-position: top right;
    margin-bottom:5px;
}


.about-box .brick-form .btn{
    position: absolute;
    left:0;
    bottom:0;
}

.about-box h3{
    padding-left:0 !important;
    position: absolute;
    left:5px;
    top:5px;
    margin:0;
    font-size:16px;
    background-color:rgba(243,243,243, 0.8);
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:100%;
}


.suggest-box{
    background-color:#f3ea3c;
    background-image:url('/img/forklift.png');
    background-repeat:no-repeat;
    background-position: bottom right;
    margin-top:0;
}


.suggest-box .brick-form{
    top:5px;
    left:5px;
    overflow:hidden;
}

.suggest-box .brick-form h5{
    font-size:14px;
    background-color:rgba(243,234,60,0.8);
    padding: 4px 5px 2px 5px;
    position:absolute;
    left:0;
    top:44px;
    font-weight: 500;
}

.suggest-box .brick-form .btn{
    display:block;
    font-weight:500;
}

.suggest-box .forklift-front{
    position:absolute;
    top:28px;
    right:201px;
}

.suggest-box .close-btn,
.about-box .close-btn{
    color:white;
}

.subscribe-box{
    background-color:#f9f8f5;
    background-image: url('/img/subscribe-banner.png');
    background-repeat: no-repeat;
    background-position: 0 0;
}


.subscribe-box .brick-form{
    padding-left:10px;
    text-align:right;
    top:41px;
    right:5px;
}

.subscribe-box .brick-form .input-field{
    background-color:rgba(255,255,255,0.8);
    margin-bottom:5px;
    max-width:240px;
}

.subscribe-box .brick-form .btn{    
    position:absolute;
    cursor: pointer;
    right:0;
    top:45px;
    font-weight:500;
}

.subscribe-box .brick-form .input-horizontal-container{
    flex-direction: row-reverse;
}

.subscribe-box .brick-form .input-field input[type=text]{
    text-align:right;
    border-color: #abafae;
}

.subscribe-box .field-error,
.subscribe-box h3{
    line-height:30px;
}

.subscribe-box.submitted{
    height:80px;
}

.subscribe-box.submitted .input-horizontal-container,
.subscribe-box.submitted .submit-btn
{
    display:none;
}

.subscribe-box.submitted .brick-form{
    top:30px;
}
.subscribe-box .close-btn
{
    background-color:rgba(249, 248, 245, 0.5);
}


.subscribe-box .close-btn:hover{
    background-color:rgba(249, 248, 245, 0.8);
}

/*Prealoder*/
.preloader{
    overflow: hidden;
    max-height:100%;
}
.grid-preloader{
    background-color:#f3f3f3;
    position:relative;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    display:none;
    z-index:3;
}

.preloader .grid-preloader{
    display:block;
}

.grid-preloader .preloader-title{
    position:absolute;
    top:calc( 50% - 35px );
    font-family:'Roboto', sans-serif;
    left:50%;
    text-align:center;
    font-weight:500;
    transform: translateX(-50%);
}

.grid-preloader ul{
  width: 100%;
  height: 15px;
  list-style: none;
}
.grid-preloader li{
  position: absolute;
  width: 15px;
  height: 22.5px;
  left: 100px;
  float: left;
}
.grid-preloader li:nth-child(1){
  left: -18.5px;
}
.grid-preloader li > span{
  position: absolute;
  width: 3.5px;
  height: 6px;
  right: -3.5px;
}
.grid-preloader li > span.top{
  top: 3px;
}
.grid-preloader li > span.bottom{
  bottom: 3px;
}
.grid-preloader li > span:before{
  content: "";
  position: absolute;
  width: 1.7px;
  height: 3px;
  right: 2px;
  background-color: rgba(255,255,255,0.3);
}
/*End-preloader*/

@media only screen and (max-width: 991px){

    .container{
        max-width:unset;
        margin:0;
    }

    .set-navbar .set-main-actions button{
        margin-right:0;
    }   

    .set-navbar .navbar-collapse{
        background-color:#3d4543;
        margin:0 -16px;
        flex-grow:1;
        width:auto;
    }

    .set-navbar .nav-link{
        text-align: center;
    }
    /*.set-navbar .set-logo{
        margin-top:-0.5rem ;
    }*/
    .set-navbar .set-search-group{
        min-width:100px;
        width:100%;
    }

    .set-main-actions{
        flex: 0 0 auto;
        width: calc(100% - 72px);
        /*margin: -8px -8px 0 0.5rem !important;*/
        margin: 0 -8px 0 0.5rem !important;
    }

    .set-navbar .set-search-group label{
        overflow:hidden;
        white-space: nowrap;
        margin-bottom:0;
    }
    .sets-container .set-card{
        min-height: 133px;
        height:133px;
    }
    
    .set-middle{
        height:60px;
    }

    .sets-container:not(.sub-card) .set-card .set-images{
        width:76px;
        
    }

    .sets-container .set-card .set-images{
        min-height:auto;
    }

    .sets-container .set-description{
        white-space:nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

}

@media only screen and (max-width: 1199px){
    .sets-container:not(.sub-card) .item-number{
        width:10px;
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 6 24' style='enable-background:new 0 0 6 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cg id='more-vert'%3E%3Cpath class='st0' d='M3,6c1.7,0,3-1.3,3-3S4.7,0,3,0S0,1.4,0,3S1.3,6,3,6z M3,9c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S4.7,9,3,9z M3,18c-1.7,0-3,1.4-3,3s1.3,3,3,3s3-1.4,3-3S4.7,18,3,18z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 3px 12px;
        color: rgba(255, 255, 255, 0);
        cursor: pointer;
        transition:0.3s;
    }

    .sets-container .item-number.collapsed{
        display:block;
    }

    .sets-container .item-number.show,
    .sets-container .item-number.collapsing{
        color: rgba(255, 255, 255, 1);
        background-image:none;
        width:auto;
        height:auto;
    }

    .sets-container:not(.sub-card) .set-instructions-container{
        -webkit-overflow-scrolling: auto;
        width: 100%;
        overflow-x: auto;
        overflow-y:hidden;
        word-break:normal;
    }
}

@media only screen and (max-width: 600px){
    .cookie-consent{
        
        text-align:center;
    }

    .cookie-consent .cookie-consent__message{
        display:block;
        margin-right:0;
    }

}

@media only screen and (max-width: 575px){
    
    .priority-nav .sight-autocomplete {
        width: calc(100% + 88px);
        margin-left: -88px;
    }

    .main-side-panel{
        min-height:100vh;
        flex-direction:column;
        display:flex;
    }
    
    .main-side-content{
        flex-grow: 1;
    }

    .top-navigation{
        display:flex;
        height:auto;
    }

    .brick-form .input-field textarea{
        height:100px;
    }

    .brick-text-2{
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

@supports (-webkit-appearance:none) {
    .main-side-panel {
      min-height: calc(100vh - 56px);
    }
}

@media (min-width: 576px){
    
    .modal-dialog {
        max-width: 1000px;
    }

    #left-panel .match-navbar{
        display:none;
    }

    #right-panel .match-navbar{
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
    }

    #notif-container{
        max-width: 540px;
    }

    .bigger-screen{
        display:flex;
    }

    .smaller-screen{
        display:none;
    }

    .main-side-panel .set-type-annotation{
        font-size: 5vw;
    }
    
}

@media (min-width: 768px){
    #notif-container{
        max-width: 720px;
    }

    .about-box h3{
        font-size:20px;
    }
}

@media (min-width: 992px){
    
    #left-panel .navbar-collapse{
        display:none !important;
    }

    #notif-container{
        max-width: 960px;
    }
}

@media (min-width: 1200px){
    #notif-container{
        max-width: 1140px;
    }

    .main-side-panel .set-type-annotation{
        font-size:60px;
    }
}