/* 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;
           }
           
           .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: 15px;
               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;
           }
           /* 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%;
               }
           }