﻿/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (max-width: 1280px) {
    .record-variation-position {
        position: relative;
        left: 0px;
        color: #000;
        padding-top: 8px;
        display: flex;
        align-items: center;
    }
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
    .grid-scroll {
        overflow-x: scroll;
    }

    .grid-scroll1 {
        height: auto;
        width: 100%;
        min-width: 1050px;
    }

    .sidnav-2 {
        right: 0;
        width: 40%;
    }

    .record-variation-position {
        position: relative;
        left: 0px;
        color: #000;
        padding-top: 8px;
    }

        .record-variation-position .control-selection {
            display: flex;
            justify-content: flex-start;
        }

            .record-variation-position .control-selection .custom-chk-wrap .check-new {
                color: #000;
            }

    .custom-chk-wrap .check-new .checkmark {
        border: 1px solid #337ab7;
    }
}

@media (min-width: 991px) and (max-width: 1024px) {
    .top_nav .navbar-right {
        float: none !important;
        width: 80%;
    }

    .sidnav-2 {
        right: 0;
        width: 60%;
    }

    .SORitem-panel {
        width: 60%;
    }

    .record-variation-position {
        position: relative;
        left: 0px;
        color: #000;
        padding-top: 8px;
    }

        .record-variation-position .control-selection {
            display: flex;
            justify-content: flex-start;
        }

            .record-variation-position .control-selection .custom-chk-wrap .check-new {
                color: #000;
            }

    .custom-chk-wrap .check-new .checkmark {
        border: 1px solid #337ab7;
    }
	
	#SOWContainer .fit-content-wrap div.tab-content{    max-height: 400px;min-height: 420px;}
}

@media (min-width: 768px) and (max-width: 991px) {
    .sidnav-2 {
        right: 0;
        width: 70%;
    }

    .SORitem-panel {
        width: 57%;
    }

    .record-variation-position {
        position: relative;
        left: 0px;
        color: #000;
        padding-top: 8px;
        display: flex;
        align-items: center;
    }

        .record-variation-position .control-selection {
            display: flex;
            justify-content: flex-start;
        }

            .record-variation-position .control-selection .custom-chk-wrap .check-new {
                color: #000;
            }

    .custom-chk-wrap .check-new .checkmark {
        border: 1px solid #337ab7;
    }
	#SOWContainer .fit-content-wrap div.tab-content{    max-height: 400px;min-height: 420px;}
}
/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/


@media (min-width: 768px) and (max-width: 1024px) {
    .login-page .loginbox-wrap {
        width: 50%;
    }

    .login-page .ribbon:before {
        left: -0.44em;
    }

    .login-page .ribbon:after {
        left: -0.3em;
    }

    .nav-sm .top_nav .nav_menu {
        width: calc(100% - 70px);
    }

    .sidnav-2 {
        right: 0;
        width: 100%;
    }

    .SORitem-panel {
        width: 100%;
    }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {


    .nav-sm .top_nav .nav_menu {
        width: calc(100% - 70px);
    }

    .nav_menu {
        width: 100%;
    }

    .grid-scroll {
        overflow-x: scroll;
    }

    .grid-scroll1 {
        height: auto;
        width: 100%;
        min-width: 1300px;
    }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (max-width: 991px) {
    .foot {
        width: calc(100% - 20px);
    }

    .btn-read, .btn-read:focus {
        bottom: 35px;
        left: 10px;
    }

    .property-area-ele {
        text-align: left;
    }

    .loader1:nth-child(1) {
        top: 46%;
        left: 46%;
    }

    .loader1:nth-child(2) {
        top: 46%;
        left: 50%;
    }

    .loader1:nth-child(3) {
        left: 50%;
        top: 50%;
    }

    .loader1:nth-child(4) {
        top: 50%;
        left: 46%;
    }
    .SORitem{
            width: 48%;
    margin: 3px;
    }
}

@media (max-width: 768px) {
    .grid-scroll {
        overflow-x: scroll;
    }

    .grid-scroll1 {
        height: auto;
        width: 100%;
        min-width: 1300px;
    }

    .btn-flex-wrap {
        display: flex !important;
    }
    /*.x_title h2{
        width:100%;
    }*/
    .sidnav-2 {
        right: 0;
        width: 100%;
    }

    .bottomalignment label {
        width: unset;
    }

    .loader1:nth-child(1) {
        top: 46%;
        left: 48%;
    }

    .loader1:nth-child(2) {
        top: 46%;
        left: 51%;
    }

    .loader1:nth-child(3) {
        left: 51%;
        top: 50%;
    }

    .loader1:nth-child(4) {
        top: 50%;
        left: 48%;
    }

    .align-div {
        text-align: left;
    }

    .menu-report-btn {
        display: block;
    }

    .filter-btn1 {
        padding-top: 10px;
    }
     .SORitem{
            width: 100%;
    margin: 3px;
    }
    
}

@media (min-width: 481px) and (max-width: 767px) {

    /*.top_nav .nav_menu {
        width: 100%;
    }*/
    .nav-md .top_nav .nav_menu {
        width: 100%;
    }

    .nav-sm .top_nav .nav_menu {
        width: calc(100% - 70px);
    }

    .formdiv > div:nth-child(even) {
        margin-left: 7px;
    }

    .SORitem-panel {
        width: 100%;
        left: -160%;
    }

    .SORitem-contentpanel {
        height: 92%;
    }

    .rightsidenav {
        width: 0px;
        left: -160%;
        position: relative;
    }

    .record-variation-position {
        position: relative;
        left: 0px;
        color: #000;
        padding-top: 8px;
    }

        .record-variation-position .control-selection {
            display: flex;
            justify-content: flex-start;
        }

            .record-variation-position .control-selection .custom-chk-wrap .check-new {
                color: #000;
            }

    .custom-chk-wrap .check-new .checkmark {
        border: 1px solid #337ab7;
    }

    .loader1:nth-child(1) {
        top: 46%;
        left: 47%;
    }

    .loader1:nth-child(2) {
        top: 46%;
        left: 51%;
    }

    .loader1:nth-child(3) {
        left: 51%;
        top: 50%;
    }

    .loader1:nth-child(4) {
        top: 50%;
        left: 47%;
    }

    .report-menu-inner {
        justify-content: end;
    }

    .textbox1 {
        width: 50%;
        margin-left: 20px;
    }
}

@media (min-width: 481px) and (max-width: 600px) {
    .color-info .color-wrap {
        flex-direction: column;
        align-items: baseline;
        padding-top: 10px;
        display: flex;
    }

        .color-info .color-wrap .color-inner {
            display: flex;
            align-items: center;
        }
}
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
    .navbar-right .user-profile {
        min-width: unset;
    }

    .x_title {
        display: inline-block;
    }

    .login-page .loginbox-wrap {
        width: 230px;
        padding: 45px 25px 37px 25px;
    }

    .login-page .ribbon {
        margin: 0 -30px 0 -25px;
    }

    .nav-md .top_nav .nav_menu {
        width: 100%;
    }

    .nav-sm .top_nav .nav_menu {
        width: calc(100% - 70px);
    }

    .navbar-right a.info-number {
        padding: 17px 15px;
    }

    .nav.toggle {
        padding-top: 12px;
    }

    .navbar-nav .open .dropdown-menu {
        width: 220px;
    }

    .login-page .loginbox-wrap {
        width: 270px;
    }

    .login-page .loginbox-wrap {
        width: 250px;
    }

    .login-page .login-input {
        font-size: 13px;
        height: 40px;
        padding: 0 5px 0 30px;
    }

    .login-page .contact100-form-checkbox {
        padding-bottom: 25px;
    }

    .login-page .focus-input100::after {
        font-size: 16px;
        top: 8px;
    }

    .login-page .ribbon img {
        width: 90%;
    }

    .searchbar {
        width: 140px;
    }

        .searchbar:focus {
            width: 170px;
        }

    .formdiv > div {
        width: 100%;
        float: left;
    }

        .formdiv > div:nth-child(even) {
            margin-left: 0px;
        }

    .insurancedoc .input-group.file-caption-main {
        max-width: 100%;
    }

    .p-sm-0 {
        padding: 0;
    }

    .btn {
        font-size: 13px;
    }

    .tab-content .lead {
        height: 100px;
    }

    .property-area-ele {
        text-align: left;
    }

    .btn-read, .btn-read:focus {
        left: 10px;
    }

    .SORitem-panel {
        width: 100%;
        left: -166%;
    }

    .SORitem-contentpanel {
        height: 100%;
    }

    .sidnav-2 {
        width: 100%;
        background: #fff;
    }

    .rightsidenav {
        width: 0px;
        left: -160%;
        position: relative;
    }

    .SORitempanel-wrap {
        height: 91%;
    }

    .record-variation-position {
        position: relative;
        left: 0px;
        color: #000;
        padding-top: 8px;
        display: block;
    }

        .record-variation-position .control-selection {
            display: flex;
            justify-content: flex-start;
        }

            .record-variation-position .control-selection .custom-chk-wrap .check-new {
                color: #000;
            }

    .custom-chk-wrap .check-new .checkmark {
        border: 1px solid #337ab7;
    }

    .loader1:nth-child(1) {
        top: 46%;
        left: 44%;
    }

    .loader1:nth-child(2) {
        top: 46%;
        left: 51%;
    }

    .loader1:nth-child(3) {
        left: 51%;
        top: 50%;
    }

    .loader1:nth-child(4) {
        top: 50%;
        left: 44%;
    }

    .top_nav .navbar-right {
        width: 82%;
    }

    .toggle {
        width: 45px;
    }

    .global-filter {
        display: block;
    }

    .divPropertyPH .gallery-filter > div {
        display: block;
        align-items: center;
        justify-content: space-between;
    }

    .color-info .color-wrap {
        flex-direction: column;
        align-items: baseline;
        padding-top: 10px;
        display: flex;
    }

        .color-info .color-wrap .color-inner {
            display: flex;
            align-items: center;
        }

    .textbox1 {
        width: 30%;
        margin-left: 20px;
    }

    #SOWContainer .fit-content-wrap div.tab-content {
        min-height: 300px;
        overflow: auto;
        max-height: 330px;
    }

    .foot {
        min-height: 400px;
    }

    .nav-sm .foot {
        width: calc(100% - 90px);
    }

    .area-element-filter-wrap {
        display: block;
    }

    .SORgeneric {
        width: 94%;
    }

    .tab-content .lead {
        padding: 0px 20px;
    }

    .btnAttachSOR {
        margin-bottom: 5px !important;
    }
}

@media (max-width: 320px) {
    .p-sm-0 {
        padding: 0;
    }

    .formdiv > div {
        width: 100%;
        float: left;
    }

        .formdiv > div:nth-child(even) {
            margin-left: 0px;
        }
}

@media not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {

    .icheckbox_flat-blue, .iradio_flat-blue {
        background-image: url(../images/blue.png);
        -webkit-background-size: 176px 22px;
        background-size: 176px 22px;
    }
}

@media (max-width: 1200px) {
    .tab_title h3 {
        /*width: 62%;*/
        font-size: 16px;
    }
}

@media (max-width: 1200px) {
    .x_title h2 {
        width: auto;
        font-size: 17px;
    }
}
