/* Full-width input fields */
            
            input[type=text],
            input[type=password] {
                width: 100%;
                padding: 12px 20px;
                margin: 8px 0;
                display: inline-block;
                border: 1px solid #ccc;
                box-sizing: border-box;
            }
            
            input[type=number]::-webkit-inner-spin-button,
            input[type=number]::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
            /* Set a style for all buttons */
            
            button {
                background-color: #003189;
                color: white;
                padding: 14px 20px;
                margin: 8px 0;
                border: none;
                cursor: pointer;
                width: 100%;
            }
            
            button:hover {
                opacity: 0.8;
            }
            
            button .ServButton:active {
                background-color: #6f42c1;
            }
            /* Extra styles for the cancel button */
            
            .cancelbtn {
                width: auto;
                padding: 10px 18px;
                background-color: #f44336;
            }
            /* Center the image and position the close button */
            
            .imgcontainer {
                text-align: center;
                margin: 10px 0 12px 0;
                position: relative;
            }
            
            #areaRange {
                width: 135%;
            }
            
            #timeRange {
                width: 135%;
            }
            
            .imgcontainer h2 {
                color: #FFBE00;
                font-size: 25px;
                margin-top: 20px;
                margin-bottom: 20px;
                font-family: "Asap-Bold";
            }
            
            img.avatar {
                width: 16%;
                /*border-radius: 50%;*/
            }
            
            .container {
                padding: 16px;
            }
            
            span.psw {
                float: right;
                padding-top: 16px;
            }
            /* The Modal (background) */
            
            .modal {
                display: none;
                /* Hidden by default */
                position: fixed;
                /* Stay in place */
                z-index: 3000;
                /* Sit on top */
                left: 0;
                top: 0;
                width: 100%;
                /* Full width */
                height: 100%;
                /* Full height */
                overflow: auto;
                /* Enable scroll if needed */
                background-color: rgb(0, 0, 0);
                /* Fallback color */
                background-color: rgba(0, 0, 0, 0.4);
                /* Black w/ opacity */
                padding-top: 60px;
            }
            /* Modal Content/Box */
            
            .modal-content {
                background-color: #fefefe;
                margin: 5% auto 15% auto;
                /* 5% from the top, 15% from the bottom and centered */
                border: 1px solid #888;
                width: 40%;
                /* Could be more or less, depending on screen size */
            }
            /* The Close Button (x) */
            
            .close {
                position: absolute;
                right: 25px;
                top: 0;
                color: #000;
                font-size: 35px;
                font-weight: bold;
            }
            
            .close:hover,
            .close:focus {
                color: red;
                cursor: pointer;
            }
            
            .imgclean {
                position: absolute;
                /*left: 312px;
                top: -81px;
                /*background: #164292;*/
                left: 44%;
                top: -237%;
                border-radius: 14px;
                width: 10%;
            }
            
            .imgcleanmodel {
                width: 43%;
            }
            
            .regForm {
                width: 52%;
            }
            /* Add Zoom Animation */
            
            .animate {
                -webkit-animation: animatezoom 0.6s;
                animation: animatezoom 0.6s
            }
            
            @-webkit-keyframes animatezoom {
                from {
                    -webkit-transform: scale(0)
                }
                to {
                    -webkit-transform: scale(1)
                }
            }
            
            @keyframes animatezoom {
                from {
                    transform: scale(0)
                }
                to {
                    transform: scale(1)
                }
            }
            /* Change styles for span and cancel button on extra small screens */
            
            @media screen and (max-width: 300px) {
                span.psw {
                    display: block;
                    float: none;
                }
                .cancelbtn {
                    width: 100%;
                }
            }
            
            .cursorpointer {
                cursor: pointer;
            }
            
            .text-success {
                color: #28a745;
            }
            
            .text-danger {
                color: #dc3545;
            }
            
            .table {
                -webkit-box-shadow: 0 3px 10px #ccc;
                -moz-box-shadow: 0 3px 10px #ccc;
                box-shadow: 0 3px 10px #ccc;
            }
            
            .items-collection {
                margin: 20px 0 0 0;
            }
            
            .items-collection label.btn-default.active {
                background-color: #007ba7;
                color: #FFF;
            }
            
            .items-collection label.btn-default {
                width: 100%;
                border: 1px solid #305891;
                margin: 5px;
                border-radius: 17px;
                color: #305891;
            }
            
            .items-collection label .itemcontent {
                width: 100%;
            }
            
            .items-collection .btn-group {
                width: 100%
            }
            
            .items {
                max-width: 100%;
            }
            /*  Chat chat chat box */
            
            .chatcontainer {
                /* border: 2px solid #dedede;*/
                background-color: #f1f1f1;
                /*    border-radius: 5px;*/
                padding: 10px;
                /* margin: 10px 0;*/
            }
            
            .darker {
                border-color: #ccc;
                background-color: #ddd;
            }
            
            .chatcontainer::after {
                content: "";
                clear: both;
                display: table;
            }
            
            .chatcontainer img {
                float: left;
                max-width: 60px;
                width: 100%;
                margin-right: 20px;
                border-radius: 50%;
            }
            
            .chatcontainer img.right {
                float: right;
                margin-left: 20px;
                margin-right: 0;
            }
            
            .time-right {
                float: right;
                color: #aaa;
            }
            
            .time-left {
                float: left;
                color: #999;
            }
            
            .caticon {
                max-width: 24.333333%;
            }
            /* chat box */
            
            .chaticon {
                /*display: none;*/
                position: fixed;
                z-index: 9900;
                bottom: 10px;
                right: 10px;
                width: 10%;
                border: none;
                cursor: pointer;
            }
            
            .chaticon img {
                width: 146px;
            }
            
            .sticky {
                display: block;
                position: fixed;
                z-index: 9999;
                bottom: 10px;
                right: 10px;
                width: 300px;
                box-shadow: 0 1px 3px #666;
                background: #7574b9;
                color: #fff;
                font-size: 14px;
                /* padding: 18px;
    box-sizing: border-box;*/
            }
            
            .imgChat {
                text-align: center;
                margin: 8px 0 5px 0;
                position: relative;
            }
            
            .closechat {
                position: absolute;
                right: 25px;
                top: 0;
                color: #000;
                font-size: 25px;
                font-weight: bold;
            }
            
            .closechat:hover,
            .closechat:focus {
                color: red;
                cursor: pointer;
            }
            
            .buttonclose {
                /* background-color: #8bcf1d;*/
                color: white;
                padding: 14px 20px;
                margin: 0;
                border: none;
                cursor: pointer;
                width: 22%;
                float: right;
            }
            
            .buttonclose:hover {
                opacity: 0.8;
            }
            
            .buttonclose :active {
                background-color: #6f42c1;
            }
            
            img.liveChatImg {
                float: left;
                width: 25%;
                /* left: 35px; */
                top: -6px;
                display: block;
                position: absolute;
                margin: 5px 10px;
                padding: 0px;
            }
            
            .imgChat h6 {
                height: 46px;
            }
            
            .msgtext {
                height: 53px;
                width: 78%;
                padding: 5px;
            }
            
            .badge-light {
                color: #ffffff;
                background-color: #fa9f00;
            }
            /*#page-wrap                      { width: 500px; margin: 30px auto; position: relative; }*/
            
            #chat-wrap {
                border: 1px solid #eee;
                margin: 0 0 15px 0;
            }
            
            #chat-area {
                height: 300px;
                overflow: auto;
                border: 1px solid #666;
                padding: 20px;
                background: white;
            }
            
            #chat-area span {
                color: white;
                background: #333;
                padding: 4px 8px;
                border-radius: 5px;
                -webkit-border-radius: 8px;
                margin: 0 5px 0 0;
                overflow: hidden;
            }
            
            #chat-area p {
                padding: 8px 0;
                border-bottom: 1px solid #ccc;
            }
            
            #name-area {
                position: absolute;
                top: 12px;
                right: 0;
                color: white;
                font: bold 12px "Lucida Grande", Sans-Serif;
                text-align: right;
            }
            
            #name-area span {
                color: #fa9f00;
            }
            
            #send-message-area p {
                float: left;
                color: white;
                padding-top: 27px;
                font-size: 14px;
            }
            
            #sendie {
                border: 3px solid #999;
                width: 300px;
                padding: 10px;
                font: 12px "Lucida Grande", Sans-Serif;
                float: right;
            }
            
            .boxmodletitle {
                background-color: #003189;
                height: 50px;
                padding: 0;
                margin: 0;
            }
            
            .suggestion {
                width: 400px;
                margin: 7% auto;
            }
            
            .cotwo {
                column-count: 2;
            }
            
            .btn-whiteM {
                background-color: rgba(0, 0, 0, 0);
            }
            
            .btn-whiteM:hover {
                opacity: 0.8;
            }
            
            .btn-whiteM:active {
                background-color: rgba(0, 0, 0, 0);
            }
            
            #recaptchcode {
                display: block;
                padding: 5px;
                /* background-color: #28a745;*/
                float: right;
            }
            
            .slidereditimg {
                /* position: absolute;
                float: right; */
                right: 24px;
                top: 249px;
                width: 63px;
            }
            
            .btn-upload {
                width: 14%;
                /* height: 10%; */
                float: right;
                right: 20px;
                position: absolute;
                /* top: -61px; */
                margin-top: 3px;
            }
            
            @media (max-width: 1024px) {
                .items-collection {
                    column-count: 1;
                    text-align: center;
                    width: 100%;
                }
                .chaticon {
                    /* display: none; */
                    position: fixed;
                    z-index: 9900;
                    bottom: 10px;
                    right: 76px;
                    width: 10%;
                    border: none;
                    cursor: pointer;
                }
                .chaticon img {
                    width: 108px;
                }
                .imgclean {
                    position: absolute;
                    /*left: 312px;
                    top: -81px;
                    /*background: #164292;*/
                    left: 44%;
                    top: -237%;
                    border-radius: 14px;
                    width: 13%;
                }
                .imgcleanmodel {
                    width: 72%;
                }
                #areaRange {
                    width: 100%;
                }
                #timeRange {
                    width: 100%;
                }
                .servitem {
                    display: contents;
                }
                .items-collection .btn-group {
                    width: 107%;
                }
                /*
                .itemcontent h5 {
                    font-size: 1rem;
                }
                .items-collection h5 {
                    font-size: 1rem;
                }*/
            }
            
            @media (max-width: 768px) {
                .items-collection {
                    column-count: 1;
                    text-align: center;
                    width: 100%;
                }
                .chaticon {
                    /* display: none; */
                    position: fixed;
                    z-index: 9900;
                    bottom: 10px;
                    right: 76px;
                    width: 10%;
                    border: none;
                    cursor: pointer;
                }
                .chaticon img {
                    width: 108px;
                }
                .imgclean {
                    position: absolute;
                    left: 40%;
                    top: -278%;
                    border-radius: 14px;
                    width: 20%;
                }
                .imgcleanmodel {
                    width: 72%;
                }
                #areaRange {
                    width: 138%;
                }
                #timeRange {
                    width: 100%;
                }
                .servitem {
                    display: contents;
                }
                .items-collection .btn-group {
                    width: 107%;
                }
                .modal-content {
                    background-color: #fefefe;
                    margin: 5% auto 15% auto;
                    border: 1px solid #888;
                    width: 80%;
                }
            }
            
            @media (max-width: 400px) {
                .items-collection {
                    column-count: 1;
                    text-align: center;
                    width: 100%;
                }
                .chaticon {
                    /* display: none; */
                    position: fixed;
                    z-index: 9900;
                    bottom: 10px;
                    right: 76px;
                    width: 10%;
                    border: none;
                    cursor: pointer;
                }
                .chaticon img {
                    width: 108px;
                }
                .imgclean {
                    position: absolute;
                    left: 122px;
                    top: -70px;
                    border-radius: 14px;
                    width: 20%;
                }
                .imgcleanmodel {
                    width: 72%;
                }
                #areaRange {
                    width: 105%;
                }
                #timeRange {
                    width: 105%;
                }
                .servitem {
                    display: contents;
                }
                .items-collection .btn-group {
                    width: 109%;
                }
                .itemcontent h5 {
                    font-size: 1rem;
                }
                .items-collection h5 {
                    font-size: 1rem;
                }
                .modal-content {
                    background-color: #fefefe;
                    margin: 5% auto 15% auto;
                    border: 1px solid #888;
                    width: 98%;
                }
                .h5,
                h5 {
                    font-size: 1.15rem;
                }
            }
            
            @media (max-width: 250px) {
                .items-collection {
                    column-count: 1;
                    text-align: center;
                    width: 100%;
                }
                .chaticon {
                    /* display: none; */
                    position: fixed;
                    z-index: 9900;
                    bottom: 10px;
                    right: 76px;
                    width: 10%;
                    border: none;
                    cursor: pointer;
                }
                .chaticon img {
                    width: 108px;
                }
                .imgclean {
                    position: absolute;
                    left: 122px;
                    top: -70px;
                    border-radius: 14px;
                    width: 20%;
                }
                .imgcleanmodel {
                    width: 72%;
                }
                #areaRange {
                    width: 100%;
                }
                #timeRange {
                    width: 100%;
                }
                .servitem {
                    display: contents;
                }
                .items-collection .btn-group {
                    width: 109%;
                }
                .itemcontent h5 {
                    font-size: 1rem;
                }
                .items-collection h5 {
                    font-size: 1rem;
                }
                .modal-content {
                    background-color: #fefefe;
                    margin: 5% auto 15% auto;
                    border: 1px solid #888;
                    width: 80%;
                }
            }