@media (max-width: 1200px) {

    #slider-range-min2, #slider-range-min {
        width: 65%;
    }
}

@media (max-width: 991px) {
    .notification {
        text-align: right;
        margin: 60px 0 0;
    }

    .notification-content {
        right: 0;
        left: inherit;
    }

    .notification .fa-info-circle {
        text-align: right;
        margin-right: 21px;
    }

    .user-name {
        margin: 27px 0 0;
    }

    .table-filter label {
        width: 70px;
        text-align: left;
    }

    .table-filter #datepicker, 
    .table-filter #datepicker2, 
    .table-filter select, 
    .table-filter input[type="text"] {
        width: 208px;
    }

    .calculator-info {
        margin: 70px auto 0;
        display: table;
        background: #ffffff url('../images/noise-3.png');
        border-style: solid;
        border-color: #333;
        border-width: 1px 1px 1px 1px;
        -webkit-border-radius: 0px;
        box-shadow: inset 0 0px;
        border-radius: 0px;
        padding: 5px 30px 15px;
    }

    .calculator {
        height: inherit;
    }

    .register-form .register-form-group .fa {
        color: #AFAFAF;
        font-size: 18px;
        position: relative;
        top: 8px;
        left: 0px;
    }

    .register-form .register-form-group .bubble {
        position: absolute;
        left: 26px;
        top: 66px;
        z-index: 1000;
        background: none;
        padding: 5px 10px;
        border: 0 none;
        color: #3150C1;
        border-radius: 0;
        line-height: 14px;
    }

}

@media (max-width: 767px) {
    .export {
        float: left;
    }
    
    .logo {
        width: 250px;
    }

    .calculator {
        padding: 35px 10px;
        height: inherit;
    }

    .calculator-header {
        font-size: 18px;
    }

    .calculator-info {
        margin: 70px auto 0;
        display: table;
        background: #ffffff url('../images/noise-3.png');
        border-style: solid;
        border-color: #333;
        border-width: 1px 1px 1px 1px;
        -webkit-border-radius: 0px;
        box-shadow: inset 0 0px;
        border-radius: 0px;
        padding: 5px 30px 15px;
    }

    #slider-range-min2, 
    #slider-range-min {
        margin: 16px 17px 0 0px;
        width: calc(100% - 101px);
    }

    .register-calculator #slider-range-min2, #slider-range-min {
        width: calc(100% - 101px);
    }

    .ofg-slider-sections .ofg-section {
        font-size: 10px;
    }

    .features h3 {
        font-size: 13px;
    }

    .signin {
        width: 100%;
        margin: 10px auto;
    }

    .logo {
        margin: 30px auto 0;
    }

    .user-name,
    .user-lastLogin {
        text-align: center;
    }

    .notification {
        text-align: center;
    }

    .notification-content {
        right: calc(50% - 150px);
        left: inherit;
    }

    .notification-content:after {
        right: calc(50% - 7px);
    }

    .notification .fa-info-circle {
        margin-right: 0px;
    }

    .navigation {
        height: auto;
    }

    .navigation ul {
        height: inherit;
        display: inline-block;
        margin: 0 0 0 0;
    }

    .navigation ul li {
        float: none;
        display: block;
        width: 100%;
        border-bottom: 1px solid #353535;
        border-left: 0 none;
    }

    .navigation ul li:last-of-type {
        border-bottom: 0 none;
    }

    .table-filter label {
        width: 70px;
        text-align: left;
    }

    .table-filter #datepicker, 
    .table-filter #datepicker2, 
    .table-filter select {
        width: 208px;
    }

    .table-filter input[type="submit"] {
        width: 208px;
    }

    .temp {
        display: block; margin-left: 79px;
    }

    .table-application tbody tr td table {
        width: 100%;
    }

    .table-application tbody tr td {
        padding: 3px;
    }

    .table-application tbody tr td table tbody tr td {
        width: 50%;
        padding: 4px;
    }

    .main-inner {
        padding: 50px 10px;
    }

}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table.table-1, .table-1 thead, .table-1 tbody, .table-1 th, .table-1 td, .table-1 tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .table-1 thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table-1 tr {border: 1px solid #ccc; margin-bottom: 20px; }

    .table-1 td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important; 
    }

    .table-1 td:before { 
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }

    .table-1 td:nth-of-type(1):before { content: "Id"; }
    .table-1 td:nth-of-type(2):before { content: "Клиент"; }
    .table-1 td:nth-of-type(3):before { content: "ЕГН"; }
    .table-1 td:nth-of-type(4):before { content: "Сума на кредита"; }
    .table-1 td:nth-of-type(5):before { content: "Период"; }
    .table-1 td:nth-of-type(6):before { content: "Дата на създаване"; }
    .table-1 td:nth-of-type(7):before { content: "Статус"; }
    .table-1 td:nth-of-type(8):before { content: "Действие"; }

    .table.table-1>tbody>tr>td:first-of-type, 
    .table.table-1>tbody>tr>th:first-of-type, 
    .table.table-1>tfoot>tr>td:first-of-type, 
    .table.table-1>tfoot>tr>th:first-of-type, 
    .table.table-1>thead>tr>td:first-of-type, 
    .table.table-1>thead>tr>th:first-of-type {
        border-top: 0 none;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    body { 
        padding: 0; 
        margin: 0; 
        width: 320px; }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body { 
        width: 495px; 
    }
}