@media only screen and (max-width: 1700px) {
    .form-img {
        width: 65%;
        right: -23%;
    }
}

@media only screen and (max-width: 1480px) {
    html {
        font-size: 14px;
    }
    
    .form-img {
        width: 70%;
        right: -25%;
        bottom: -70px;
    }
    
    .btn-group.input-btn-group.w-100 {
        width: auto !important;
    }
    
    .input-btn-group {
        height: 45px;
    }
    
    .btn-group .btn {
        font-size: 14px;
        width: 50px;
    }
    
    .input-btn-group input {
        width: 90px;
    }
    
    .btn.form-btn {
        min-width: 140px;
        font-size: 18px;
    }
}

@media only screen and (max-width: 1400px) {
    .form-img {
        width: 80%;
        right: -35%;
    }
}

@media only screen and (max-width: 1280px) {
    html {
        font-size: 12px;
    }
    
    .sgds-navbar-item {
        font-size: 1.125rem;
    }
    
    .upload-wrapper {
        padding-right: 20%;
    }
    
    .modal-with-imgcol .modal-dialog {
        width: 70%;
    }
    
    .form-img {
        width: 80%;
        right: -35%;
    }
    
    .form-img.r-0 {
        width: 70%;
    }
    
    .modal-with-imgcol .modal-body .btn-bottom-group {
        position: static;
        width: 100%;
    }
    
    .btn.yellow-btn {
        font-size: 14px;
    }
    
    .is-size-6 {
        font-size: 16px !important;
    }
    
    .is-size-7 {
        font-size: 15px !important;
    }
}

@media only screen and (max-width: 1200px) {
    .content-cnt {
        padding: 20px 5%;
    }
    
    .form-img {
        display: none;
    }
    
    .upload-wrapper {
        padding-right: 0px;
    }
}

@media only screen and (max-width: 1023px) {
    .sgds-navbar-menu {
        position: absolute;
        background-color: white;
        width: 92vw;
    }
    
    .sgds-navbar-item.is-tab:hover {
        padding-bottom: calc(.5rem - 1px);
    }
    
    .sgds-navbar-dropdown {
        box-shadow: none;
    }
    
    .user-navbar-item .sgds-navbar-dropdown {
        margin-top: 0px;
        background-color: transparent;
    }
    
    .user-navbar-item .sgds-navbar-dropdown .dropdown-item:hover, .user-navbar-item .sgds-navbar-dropdown .dropdown-item:active, .user-navbar-item .sgds-navbar-dropdown .dropdown-item:focus {
        background-color: transparent !important;
    }
    
    .option-cnt {
        padding: 20px 7%;
    }
    
    .form-header .btn {
        font-size: 14px;
        height: 35px !important;
    }
    
    .form-header .toggle-handle.btn {
        height: 100% !important;
    }
    
    .checkListTag {
        height: 35px;
        font-size: 16px;
        min-width: 160px;
        transform-origin: calc(100% - 17px) calc(100% - 18px);
    }
    
    .checkListPopup .icon-chevron-up {
        height: 15px;
        width: 30px;
    }
    
    .checkListPopup .checkListTag .icon-chevron-down {
        height: 15px;
    }
}

@media only screen and (max-width: 960px) {
    html {
        font-size: 11px;
    }
    
    .btn.form-btn {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 960px) {
    .accordion .card-body {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .modal-with-imgcol .modal-dialog {
        width: 90%;
    }
}

@media only screen and (max-width: 900px) {
    .btn.form-btn {
        margin-left: 12px;
    }
    
    .scrollable-table {
        overflow-x: auto;
        display: block;
    }
    
    .scrollable-table table, table.scrollable-table {
        table-layout: auto;
    }

    .table-with-textarea table {
        height: auto;
    }
}

@media only screen and (max-width: 768px) {
    /*html {
        font-size: 10px;
    }*/
    
    .accordion-section .section-content .row > div {
        padding-left: 2px;
        padding-right: 2px;
    }
    
    .sgds-navbar-item, .sgds-navbar-dropdown .sgds-navbar-item {
        font-size: 1.3rem;
    }
    
    .btn.form-btn {
        min-width: 120px;
        margin-left: 10px;
    }
    
    .option-cnt {
        padding: 20px 4%;
    }
    
    .form-header .btns-group {
        display: inline-block !important;
        text-align: right;
    }
    
    .btns-group .btn {
        margin-bottom: 5px;
    }
}

@media only screen and (max-width: 767px) {
    .accordion-section .section-content .row > div {
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .accordion-section .section-content .row > div .info-table {
        margin-top: 10px;
    }
    
    .accordion-section .section-content .row > div:first-child .info-table {
        margin-top: 0px;
    }
    
    .form-section .row > div {
        padding: 0px;
    }
    
    .form-section .row > div:not(:last-child) {
        margin-bottom: 20px;
    }

    .mobile-view {
        display: block;
    }

    .tablet-view {
        display: none;
    }

    .status-item, .two-status-cnt .status-item {
        width: 100%;
        margin-bottom: 20px;
    }

    .form-status-cnt {
        flex-direction: column;
    }

    #sltProjectGroupTypeDiv .btn-group {
        width: 100%;
    }

    #othersOutput {
        width: 100%;
    }
}

@media only screen and (max-width: 680px) {    
    .btn.form-btn {
        min-width: 110px;
    }

    .option-cnt > div {
        padding-left: 10px;
        padding-right: 10px;
    }

    .option-cnt {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media only screen and (max-width: 600px) {
    .option-cnt {
        flex-direction: column;
        padding-top: 0px;
    }

    .option-cnt .v-divider {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 60px;
        margin-bottom: 35px;
    }

    .option-cnt .v-divider .line {
        height: 1px;
        width: 100%;
        left: 0px;
        border-bottom: 2px solid #d1d1d1;
    }

    .option-cnt .v-divider .divider-text {
        left: 46%;
        top: -12px;
    }

    table.section-summary-table td {
        display: block;
        width: 100% !important;
    }

    table.section-summary-table td:first-child {
        padding-bottom: 0px;
    }
}

@media only screen and (max-width: 550px) {
    .accordion-section .accordion-section-content {
        padding: 20px 30px;
    }
}