@font-face {
    font-family: "SF Pro Text";
    font-style: normal;
    font-weight: 300;
    src: url("https://raw.githubusercontent.com/blaisck/sfwin/master/SFPro/TrueType/SFProText-Light.ttf");
  }
.primary-color{
    background-color: rgb(16, 32, 48);
    color: rgb(236, 236, 236);
}
.secondary-color{
    color: rgb(16, 32, 48);
    background-color: rgb(236, 236, 236);
}
#main-nav{
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    background: white;
}
#overview-filter{
    position: sticky; 
    top: 45px;
    z-index: 999; 
    background: white;
}
#previewTopCropModal, #previewSecondCropModal, #previewThirdCropModal, #sideContentOffcanvas{
    width: 35vw;
    overflow-y: auto;
}

@media  screen and (max-width: 992px) {
    #previewTopCropModal, #previewSecondCropModal, #previewThirdCropModal, #sideContentOffcanvas{
        width: 55vw;
    }
  }
@media  screen and (max-width: 767px) {
    /* #btn-collapse{
        display: none;
    } */
    /* #main-nav{
        top: 55px; 
    }
    #overview-filter{
        top: 100px;
    } */
    
    #previewTopCropModal, #previewSecondCropModal, #previewThirdCropModal, #sideContentOffcanvas{
        width: 80vw;
    }
}
@media  screen and (max-width: 575px) {
    #previewTopCropModal, #previewSecondCropModal, #previewThirdCropModal, #sideContentOffcanvas{
        width: 98vw;
    }
    #main-nav{
        top: 55px; 
    }
    #overview-filter{
        top: 100px;
    }
    .content{
        margin-top: 55px;
    }
    /* .content{
        margin-top: 55px;
    } */
  }
/* @media  screen and (max-width: 575px) {
    #main-nav{
        top: 55px; 
    }
    #overview-filter{
        top: 100px;
    }
    .content{
        margin-top: 55px;
    }
  } */