/* Set a style for all buttons */
       
       button {
           background-color: #203b8a;
           color: white;
           padding: 14px 20px;
           margin: 8px 0;
           border: none;
           cursor: pointer;
           border-radius: 8%;
       }
       
       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;
       }
       
       .buttonSave {
           height: 43px;
           font-size: 18px;
           width: 30%;
       }
       /* Center the image and position the close button */
       
       .imgcontainer {
           text-align: center;
           margin: 10px 0 12px 0;
           position: relative;
           height: 30px;
       }
       
       #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: 20%;
           /* border-radius: 50%; */
           /* float: left; */
           position: absolute;
           top: -38px;
           left: 0px;
       }
       
       .container {
           padding: 10px;
       }
       
       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: 9px;
           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%;
       }
       
       .studentsPhoneNoLabel {
           margin: 19px;
           font-size: 19px;
           width: 35%;
       }
       
       .studentsPhoneNo {
           width: 35%;
           float: left;
           direction: rtl;
       }
       /* Full-width input fields */
       
       input[type=text],
       input[type=password] {
           width: 72%;
           padding: 12px 20px;
           margin: 8px 0;
           display: inline-block;
           border: 1px solid #ccc;
           box-sizing: border-box;
           text-align: right;
       }
       /* 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;
       }
       
       .imgcontainer p {
           margin-top: -14px;
           font-weight: 700;
           color: #003189;
       }
       
       .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: 44%;
               top: -237%;
               border-radius: 14px;
               width: 20%;
           }
           .imgcleanmodel {
               width: 72%;
           }
           #areaRange {
               width: 100%;
           }
           #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: 500px) {
           .studentsPhoneNoLabel {
               margin: 19px;
               font-size: 19px;
               width: 22%;
           }
           .studentsPhoneNo {
               width: 65%;
           }
       }
       
       @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: 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%;
           }
           .studentsPhoneNoLabel {
               margin: 19px;
               font-size: 19px;
               width: 25%;
           }
           .studentsPhoneNo {
               width: 65%;
           }
       }