@media only screen and (max-width: 900px) {

  /*------- Reset CSS Starts -------*/

  body { display: block; }

  /*------- Reset CSS Ends -------*/

  /*------- Common CSS Starts -------*/

  .row { margin: 0 -7.5px; }
  .row > [class*='col'] { padding: 6px; }
  .flex-align-center-mobile { -webkit-align-items: center; align-items: center; -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; }
  .box-card-relative { position: relative; }
  .bg-blur { background-color: #000000c7; bottom: 0; display: none; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 12; }
  .bg-blur.active { display: block; }

    /*------- Textbox and Textarea CSS Starts -------*/

    .form-group-proj { margin-bottom: 30px; position: relative; }
    .input-placeholder { color: #444; font: 1.4rem/1.42857143 "Montserrat-Light"; left: 0; margin-bottom: 0; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; }
    .form-control-proj { background-color: transparent; border: 0; border-bottom: 1px solid #444; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; color: #000000; font: 1.8rem/1.22857143 "Montserrat-Light"; height: 40px; letter-spacing: 1px; padding: 0; }
    .form-control-proj:focus { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; outline: 0; transition: all 0.5s ease-in-out; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; }
    .form-control-proj:focus ~ .input-border > .input-placeholder,
    .form-control-proj:valid ~ .input-border > .input-placeholder { color: #000000; font: 1.6rem/1.82857143 "Montserrat-Light"; left: 0; top: 0; transform: translateY(-65%); -webkit-transform: translateY(-65%); -moz-transform: translateY(-65%); -ms-transform: translateY(-65%); -o-transform: translateY(-65%); }
    .form-control-proj:focus ~ .input-border > .input-placeholder { color: #2681ff; }
    .input-border::after { background: -webkit-linear-gradient(to right, #2681ff, #005fe0); background: -moz-linear-gradient(to right, #2681ff, #005fe0); background: -ms-linear-gradient(to right, #2681ff, #005fe0); background: -o-linear-gradient(to right, #2681ff, #005fe0); background: linear-gradient(to right, #2681ff, #005fe0); bottom: 0; content: ""; height: 1px; left: 0; position: absolute; transform: scale(0,0); -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -ms-transform: scale(0,0); -o-transform: scale(0,0); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; width: 100%; }
    .form-control-proj:focus + .input-border::after { transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); }
    textarea.form-control-proj { height: 70px; }
    textarea.form-control-proj ~ .input-border > .input-placeholder { padding: 15px 0; top: 10px; }

    /*------- Textbox and Textarea CSS Ends -------*/

    /*------- Ripple Effects CSS Starts -------*/

    .btn-ripple { overflow: hidden; position: relative; z-index: 1; }
    .btn-ripple:hover, 
    .btn-ripple:focus { opacity: .9; }
    @-webkit-keyframes ripple {
      0% { height: 0; opacity: .5; width: 0; }
      100% { height: 150px; opacity: 0; width: 150px; }
    }
    @-moz-keyframes ripple {
      0% { height: 0; opacity: .5; width: 0; }
      100% { height: 150px; opacity: 0; width: 150px; }
    }
    @-ms-keyframes ripple {
      0% { height: 0; opacity: .5; width: 0; }
      100% { height: 150px; opacity: 0; width: 150px; }
    }
    @keyframes ripple {
      0% { height: 0; opacity: .5; width: 0; }
      100% { height: 150px; opacity: 0; width: 150px; }
    }
    .ripple::before { background-color: #fff; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; content: ''; left: 50%; height: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); visibility: hidden; width: 0; z-index: 2; }
    .ripple:not(:active)::before { -webkit-animation: ripple 0.4s cubic-bezier(0, 0, 0.2, 1); animation: ripple 0.4s cubic-bezier(0, 0, 0.2, 1); transition: visibility .4s step-end; -webkit-transition: visibility .4s step-end; -moz-transition: visibility .4s step-end; -ms-transition: visibility .4s step-end; -o-transition: visibility .4s step-end; }
    .ripple:active::before { visibility: visible; }

    /*------- Ripple Effects CSS Ends -------*/

    /*------- Button CSS Starts -------*/

  .btn-proj { background: -webkit-linear-gradient(to right, #2681ff, #005fe0); background: -moz-linear-gradient(to right, #2681ff, #005fe0); background: -ms-linear-gradient(to right, #2681ff, #005fe0); background: -o-linear-gradient(to right, #2681ff, #005fe0); background: linear-gradient(to right, #2681ff, #005fe0); border: 0; -webkit-border-radius: 4px 18px; -moz-border-radius: 4px 18px; -ms-border-radius: 4px 18px; -o-border-radius: 4px 18px; border-radius: 4px 18px; box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); color: #ffffff; display: block; font-family: "Montserrat-Medium"; font-size: 1.6rem; letter-spacing: 0.5px; margin: 0 auto 15px; padding: 10px 15px; text-align: center; text-transform: uppercase; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear; width: 75%; }
  .btn-disabled-proj { background: -webkit-linear-gradient(to right, #aaa, #ccc); background: -moz-linear-gradient(to right, #aaa, #ccc); background: -ms-linear-gradient(to right, #aaa, #ccc); background: -o-linear-gradient(to right, #aaa, #ccc); background: linear-gradient(to right, #aaa, #ccc); cursor: not-allowed; }
  .btn-disabled-proj:hover,
  .btn-disabled-proj:focus { background: -webkit-linear-gradient(to right, #aaa, #ccc); background: -moz-linear-gradient(to right, #aaa, #ccc); background: -ms-linear-gradient(to right, #aaa, #ccc); background: -o-linear-gradient(to right, #aaa, #ccc); background: linear-gradient(to right, #aaa, #ccc); cursor: not-allowed; }
  .btn-proj:focus { outline: 0; }

    /*------- Button CSS Ends -------*/

    /*------- Radio Button - 1 CSS Starts -------*/

    .block-label-heading { color: #444; display: block; font: 1.6rem/1.4 "Montserrat-Regular"; margin-bottom: 15px; }
    .inline-block-label-radio-btn-proj { display: inline-block; margin: 0 15px 15px 0; position: relative; }
    .block-label-radio-btn-proj { display: block; margin-bottom: 15px; position: relative; }
    .block-label-radio-btn-proj:last-child { margin-bottom: 0; }
    input[class="radio-btn-proj-1"] { display: none; }
    input[class="radio-btn-proj-1"] + span { background-color: #444; border: 3px solid #ffffff; -webkit-box-shadow: inset 0 0 0 0 #2681ff; -moz-box-shadow: inset 0 0 0 0 #2681ff; -ms-box-shadow: inset 0 0 0 0 #2681ff; -o-box-shadow: inset 0 0 0 0 #2681ff; box-shadow: inset 0 0 0 0 #2681ff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; display: block; height: 20px; left: 0; position: absolute; top: 0; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear; width: 20px; }
    input[class="radio-btn-proj-1"] + span + span { color: #444; display: block; font: 1.6rem/1.4rem "Montserrat-Light"; padding: 3px 0 0 30px; word-break: break-all; }
    input[class="radio-btn-proj-1"]:checked + span { -webkit-box-shadow: inset 0 0 0 12px #2681ff; -moz-box-shadow: inset 0 0 0 12px #2681ff; -ms-box-shadow: inset 0 0 0 12px #2681ff; -ms-box-shadow: inset 0 0 0 12px #2681ff; -o-box-shadow: inset 0 0 0 12px #2681ff; box-shadow: inset 0 0 0 12px #2681ff; }

    /*------- Radio Button - 1 CSS Ends -------*/

    /*------- Radio Button - 2 CSS Starts -------*/

    input[class="radio-btn-proj-2"] { display: none; }
    input[class="radio-btn-proj-2"] + span { background-color: #444; -webkit-border-radius: 4px 18px 4px 18px; -moz-border-radius: 4px 18px 4px 18px; -ms-border-radius: 4px 18px 4px 18px; -o-border-radius: 4px 18px 4px 18px; border-radius: 4px 18px 4px 18px; -webkit-box-shadow: inset 0 0 0 0 #2681ff; -moz-box-shadow: inset 0 0 0 0 #2681ff; -ms-box-shadow: inset 0 0 0 0 #2681ff; -o-box-shadow: inset 0 0 0 0 #2681ff; box-shadow: inset 0 0 0 0 #2681ff; color: #ffffff; display: block; font: 1.6rem/1.4 "Montserrat-Light"; padding: 5px 20px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear; }
    input[class="radio-btn-proj-2"]:checked + span { background-color: #444; -webkit-box-shadow: inset 105px 0 0 0 #2681ff; -moz-box-shadow: inset 105px 0 0 0 #2681ff; -ms-box-shadow: inset 105px 0 0 0 #2681ff; -o-box-shadow: inset 105px 0 0 0 #2681ff; box-shadow: inset 105px 0 0 0 #2681ff; }

    /*------- Radio Button - 2 CSS Ends -------*/

    /*------- Radio Button - 3 CSS Starts -------*/

    .inline-block-radio-btn-proj-3 { display: flex; justify-content: center; position: relative; }
    .inline-block-label-radio-btn-proj-3 { display: inline-block; margin: 0 0 15px 0; position: relative; }
    label input[class="radio-btn-proj-3"] { display: none; }
    label input[class="radio-btn-proj-3"] + span { background-color: #444; -webkit-border-radius: 18px 0 0  18px; -moz-border-radius: 18px 0 0  18px; -ms-border-radius: 18px 0 0  18px; -o-border-radius: 18px 0 0  18px; border-radius: 18px 0 0  18px; -webkit-box-shadow: inset 0 0 0 0 #2681ff; -moz-box-shadow: inset 0 0 0 0 #2681ff; -ms-box-shadow: inset 0 0 0 0 #2681ff; -o-box-shadow: inset 0 0 0 0 #2681ff; box-shadow: inset 0 0 0 0 #2681ff; color: #ffffff; display: block; font: 1.6rem/1.4 "Montserrat-Light"; padding: 5px 20px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear; }
    label:last-child input[class="radio-btn-proj-3"] + span { -webkit-border-radius: 0 18px 18px 0; -moz-border-radius: 0 18px 18px 0; -ms-border-radius: 0 18px 18px 0; -o-border-radius: 0 18px 18px 0; border-radius: 0 18px 18px 0; }
    label:first-child input[class="radio-btn-proj-3"]:checked + span { background-color: #444; -webkit-box-shadow: inset 105px 0 0 0 #2681ff; -moz-box-shadow: inset 105px 0 0 0 #2681ff; -ms-box-shadow: inset 105px 0 0 0 #2681ff; -o-box-shadow: inset 105px 0 0 0 #2681ff; box-shadow: inset 105px 0 0 0 #2681ff; }
    label:last-child input[class="radio-btn-proj-3"]:checked + span { background-color: #444; -webkit-box-shadow: inset -105px 0 0 0 #2681ff; -moz-box-shadow: inset -105px 0 0 0 #2681ff; -ms-box-shadow: inset -105px 0 0 0 #2681ff; -o-box-shadow: inset -105px 0 0 0 #2681ff; box-shadow: inset -105px 0 0 0 #2681ff; }

    /*------- Radio Button - 3 CSS Ends -------*/

    /*------- Radio Button - 4 CSS Starts -------*/

    .inline-block-radio-btn-proj-4 { display: flex; justify-content: center; position: relative; }
    .inline-block-label-radio-btn-proj-4 { display: inline-block; margin: 0 0 15px 0; position: relative; }
    label input[class="radio-btn-proj-4"] { display: none; }
    label input[class="radio-btn-proj-4"] + span { border: 2px solid #2681ff; -webkit-box-shadow: inset 0 0 0 0 #2681ff; -moz-box-shadow: inset 0 0 0 0 #2681ff; -ms-box-shadow: inset 0 0 0 0 #2681ff; -o-box-shadow: inset 0 0 0 0 #2681ff; box-shadow: inset 0 0 0 0 #2681ff; color: #2681ff; display: block; font: 1.6rem/1.4 "Montserrat-Light"; padding: 5px 20px; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear; }
    label:last-child input[class="radio-btn-proj-4"] + span {  }
    label:first-child input[class="radio-btn-proj-4"]:checked + span { box-shadow: inset 0 36px 0 #2681ff; color:  #ffffff; }
    label:nth-child(2) input[class="radio-btn-proj-4"]:checked + span { box-shadow: inset 0 -36px 0 #2681ff; color:  #ffffff; }
    label:last-child input[class="radio-btn-proj-4"]:checked + span { box-shadow: inset 0 -36px 0 #2681ff; color:  #ffffff; }

    /*------- Radio Button - 3 CSS Ends -------*/

    /*------- New Listing Page Starts -------*/

    .box-card-all-data-info-listing { position: relative; }
    .fd-icon-pos { position: absolute; right: 0; top: 0; }
    .fd-icon-circle { background-color: #f2f1f7; -webkit-border-radius: 0 18px; -moz-border-radius: 0 18px; -ms-border-radius: 0 18px; -o-border-radius: 0 18px; border-radius: 0 18px; height: 40px; width: 40px; }
    .fd-icon-circle > i { display: block; font-size: 1.6rem; line-height: 40px; text-align: center; }
    .media-fd-info { border-bottom: 1px solid #a6a6a6e0; margin: 0 0 10px; padding-bottom: 10px; }
    .media-left-fd-info { padding-right: 15px; }
    .media-left-fd-info > img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; height: 40px; object-fit: cover; width: 40px; }
    .media-left-fd-info > a > img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; height: 40px; object-fit: cover; width: 40px; }
    .media-body-fd-info > h4,
    .media-body-fd-info > h4 > a { color: #444; font: 1.4rem/1.4 "Montserrat-Medium"; margin-bottom: 3px; }
    .media-body-fd-info > p { color: #444; font: 1.6rem/1.8 "Montserrat-Regular"; margin-bottom: 5px; }
    .media-body-fd-info > p > i { padding-right: 5px; }
    .box-all-data-info-listing > h4 { color: #444; font: 1.4rem/1.7 "Montserrat-Medium"; margin-bottom: 5px; }
    .box-all-data-info-listing > p { color: #444; font: 1.2rem/1.7 "Montserrat-Regular"; }
    .box-all-data-info-listing > p.remarks-info { word-break: break-all; text-align: justify; }
    .box-all-data-info-listing > p > i { padding-right: 3px; }
    /* .box-all-data-info-listing > p > span { display: block; } */
    .fd-status-icon { text-align: right; }
    .status-label { margin-bottom: 0; }
    .status-label > a,
    .status-label > p { background-color: #2681ff; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; display: block; margin-bottom: 0; padding: 5px 10px; text-align: center; }
    .status-label > a > i,
    .status-label > p > i { color: #fff; padding-right: 3px; }
    .status-label > a > span,
    .status-label > p > span { color: #ffffff; font: 1.6rem/1.8 "Montserrat-Light"; }
    .status-label.active > a { background-color: #ff6700; }
    .status-label.follow-up > a { background-color: #000d58; }
    .status-label.cancel > a,
    .status-label.cancel > p { background-color: #ff0000; }
    .status-label.complete > a,
    .status-label.complete > p { background-color: #9ac762; }
    .status-label.pending > a,
    .status-label.pending > p { background-color: #ffc107; }
    .status-label.dispatch > a { background-color: #fbb034; }
    .status-label.delivered > a { background-color: #03a9f4; }
    .media-body-fd-info > address > p { color: #444; font: 1.2rem/1.7 "Montserrat-Regular"; padding-left: 20px; position: relative; }
    .media-body-fd-info > address > p::before { content: "\f21d"; font-family: "Font Awesome 5 Pro"; font-weight: 900; left: 0; position: absolute; top: 0; }

    /*------- New Listing Page Ends -------*/

    /*------- Fixed Bottom Circle Button Section Starts -------*/

    .fixed-circle-btn { bottom: 15px; position: fixed; right: 15px; z-index: 12; }
    .circle-btn-proj { background: -webkit-linear-gradient(to bottom, #2681ff, #005fe0); background: -moz-linear-gradient(to bottom, #2681ff, #005fe0); background: -ms-linear-gradient(to bottom, #2681ff, #005fe0); background: -o-linear-gradient(to bottom, #2681ff, #005fe0); background: linear-gradient(to bottom, #2681ff, #005fe0); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0px 7px 7px -4px #00000027, 5px 5px 15px 5px rgba(0, 0, 0, 0); -moz-box-shadow: 0px 7px 7px -4px #00000027, 5px 5px 15px 5px rgba(0, 0, 0, 0); -ms-box-shadow: 0px 7px 7px -4px #00000027, 5px 5px 15px 5px rgba(0, 0, 0, 0); -o-box-shadow: 0px 7px 7px -4px #00000027, 5px 5px 15px 5px rgba(0, 0, 0, 0); box-shadow: 0px 7px 7px -4px #00000027, 5px 5px 15px 5px rgba(0, 0, 0, 0); display: block; height: 50px; width: 50px; }
    .circle-btn-proj > i { color: #ffffff; display: block; font-size: 1.8rem; line-height: 50px; text-align: center; }

    /*------- Fixed Bottom Circle Button Section Ends -------*/

    /*------- Custom Single Dropdown CSS Starts -------*/

    .custom-select { margin-bottom: 30px; position: relative; width: 100%; }
    .custom-select select { display: none; }
    .select-selected { background-color: transparent; border-bottom: 1px solid #444; }
    .select-selected::before { background: -webkit-linear-gradient(to right, #2681ff, #005fe0); background: -moz-linear-gradient(to right, #2681ff, #005fe0); background: -ms-linear-gradient(to right, #2681ff, #005fe0); background: -o-linear-gradient(to right, #2681ff, #005fe0); background: linear-gradient(to right, #2681ff, #005fe0); bottom: 0; content: ""; height: 1px; left: 0; position: absolute; transform: scale(0,0); -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -ms-transform: scale(0,0); -o-transform: scale(0,0); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; width: 100%; }
    .select-selected::after { color: #444; content: "\f078"; font-family: "Font Awesome 5 Pro"; font-size: 1.6rem; font-weight: 900; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
    .select-selected.active::before { transform: scale(1,1); }
    .select-selected.active::after { content: "\f077"; }
    .select-selected.select-arrow-active::after { border-color: transparent transparent #fff transparent; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
    .select-items div,
    .select-selected { color: #444; cursor: pointer; font-family: "Montserrat-Light"; font-size: 1.4rem; padding: 10px 0; user-select: none; }
    .select-items { background-color: #fff; border: 1px solid #e8e8e8; -webkit-box-shadow: 0 10px 11px rgba(0,0,0,.21); -moz-box-shadow: 0 10px 11px rgba(0,0,0,.21); -ms-box-shadow: 0 10px 11px rgba(0,0,0,.21); -o-box-shadow: 0 10px 11px rgba(0,0,0,.21); box-shadow: 0 10px 11px rgba(0,0,0,.21); left: 0; position: absolute; right: 0; top: 100%; z-index: 99; }
    .select-items div { font-family: "Montserrat-Regular"; font-size: 1.5rem; padding: 5px 15px; }
    .select-hide { display: none; }
    .select-items div:hover,
    .same-as-selected { background-color: #2681ff; color: #fff !important; }

    /*------- Custom Single Dropdown CSS Ends -------*/

  /*------- Common CSS Ends -------*/

  /*------- Flash Screen Page Starts -------*/

  .box-spalsh-screen { background: -webkit-linear-gradient(to bottom, #2681ff, #005fe0); background: -moz-linear-gradient(to bottom, #2681ff, #005fe0); background: -ms-linear-gradient(to bottom, #2681ff, #005fe0); background: -o-linear-gradient(to bottom, #2681ff, #005fe0); background: linear-gradient(to bottom, #2681ff, #005fe0); height: 100vh; position: relative; }
  .splash-screen-logo { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
  .splash-screen-logo > a { display: block; }

  /*------- Flash Screen Page Ends -------*/

  /*------- LogIn Screen Page Starts -------*/

  .box-login-screen { background-color: #fff; height: 100vh; position: relative; }
  .box-login-screen-center { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 85%; }
  .box-login-info > img { margin-bottom: 15px; width: 50px; }
  .box-login-info > h1 { background: -webkit-linear-gradient(left, #005fe0, #2681ff); background: -moz-linear-gradient(left, #005fe0, #2681ff); background: -ms-linear-gradient(left, #005fe0, #2681ff); background: -o-linear-gradient(left, #005fe0, #2681ff); background: linear-gradient(left, #005fe0, #2681ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 2.4rem/1.1 "Montserrat-Regular"; margin-bottom: 100px; }
  .mobile-image { background-color: #005fe0; -webkit-border-radius: 0 70px 0 70px; -moz-border-radius: 0 70px 0 70px; -ms-border-radius: 0 70px 0 70px; -o-border-radius: 0 70px 0 70px; border-radius: 0 70px 0 70px; content: ""; display: block; height: 150px; margin: 0 auto 30px; position: relative; width: 150px; }
  .mobile-image::after { background-color: #2681ff; -webkit-border-radius: 0 70px 0 70px; -moz-border-radius: 0 70px 0 70px; -ms-border-radius: 0 70px 0 70px; -o-border-radius: 0 70px 0 70px; border-radius: 0 70px 0 70px; bottom: 0; content: ""; height: 75px; margin: 0 auto; left: 42%; position: absolute; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 125px; }
  .mobile-image > img { margin: 0 auto; position: relative; top: -32px; width: 90px; z-index: 1; }
  .cr-num-otp { margin: -15px 0 30px; }
  .cr-num-otp p > a { color: #000; font:  1.4rem/1 "Montserrat-Regular"; }

  
  /*------- LogIn Screen Page Ends -------*/

  /*------- Home Page Starts -------*/

    /*------- BG Blur Section Starts -------*/

    .bg-blur { background-color: #000000a7; bottom: 0; display: none; height: 100vh; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 12; }
    .bg-blur.active { display: block; }

    /*------- BG Blur Section Ends -------*/

    /*------- Sidebar Menu Section Starts -------*/

    .fixed-sidebar-mobile { background: -webkit-linear-gradient(to bottom, #2681ff, #005fe0); background: -moz-linear-gradient(to bottom, #2681ff, #005fe0); background: -ms-linear-gradient(to bottom, #2681ff, #005fe0); background: -o-linear-gradient(to bottom, #2681ff, #005fe0); background: linear-gradient(to bottom, #2681ff, #005fe0); height: 100vh; left: 0; opacity: 0; overflow-y: scroll; position: fixed; top: 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear; visibility: hidden; width: 280px; z-index: 13; }
    .fixed-sidebar-mobile.active { opacity: 1; transform: translateX(0); visibility: visible; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); }
    .sidebar-menu-info { opacity: 0; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear; visibility: hidden; }
    .sidebar-menu-info.active { opacity: 1; transform: translateY(0); visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); }
    .sidebar-menu-close { padding: 15px; }
    .sidebar-menu-close > a > i { color: #000000; font-size: 1.8rem; padding-right: 5px; }
    .sidebar-menu-close > a > span { color: #000000; font: 1.4rem/1.4 "Montserrat-Light"; }
    
    .media-fd-sidebar-info { margin: 0; padding: 15px; }
    .media-left-fd-sidebar-info { padding-right: 15px; }
    .media-left-fd-sidebar-info > img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; height: 40px; object-fit: cover; width: 40px; }
    .media-body-fd-sidebar-info > h4 { color: #fff; font: 1.4rem/1.4 "Montserrat-Medium"; margin-bottom: 3px; }
    .media-body-fd-sidebar-info > p { color: #ffffff; -webkit-text-fill-color: #ffffff; font: 1.6rem/1.8 "Montserrat-Regular"; margin-bottom: 5px; }
    .media-body-fd-sidebar-info > p > i { padding-right: 5px; }

    .sidebar-menu-listing-mobile > li { display: block; }
    .sidebar-menu-listing-mobile > li:last-child { border-bottom: 0; }
    .sidebar-menu-listing-mobile > li > a { border-left: 4px solid transparent; color: #fff; display: block; font: 1.6rem/1 "Montserrat-Light"; padding: 15px 10px; }
    .sidebar-menu-listing-mobile > li > a > i { padding-right: 5px; text-align: center; width: 25px; }
    .sidebar-menu-listing-mobile > li.active > a,
    .sidebar-menu-listing-mobile > li > a:hover { background-color: #00000017; border-left: 4px solid #fff; color: #ffffff; }

    /*------- Sidebar Menu Section Ends -------*/

    /*------- Logo and burger-menuburger Menu Section Starts -------*/

    .bg-logo-burger-menu-mobile { background-color: #fff; -webkit-box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); -moz-box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); -ms-box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); -o-box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); padding: 0 15px; }
    .header-logo-mobile > a { display: inline-block; }
    .header-logo-mobile > a > img { width: 50px; }

      /*------- Burger Menu CSS Starts -------*/
      
      .burger-menu { cursor: pointer; height: 50px; position: relative; width: 50px; }
      .burger-menu span { background-color: #2681ff; height: 2px; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; width: 25px; }
      .burger-menu span::before,
      .burger-menu span::after { background-color: #2681ff; content: ""; height: 2px; left: 50%; position: absolute; top: 9px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; width: 15px; }
      .burger-menu span::before { top: -9px; }
      .burger-menu.active span { background-color: transparent; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; }
      .burger-menu.active span::before { top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
      .burger-menu.active span::after { top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }

      /*------- Burger Menu CSS Ends -------*/

    /*------- Logo and burger-menuburger Menu Section Ends -------*/

    /*------- Wrapper Section Starts -------*/

    .wrapper-container { height: 100%; overflow: hidden; position: relative; -webkit-perspective: 1500; perspective: 1500; }
    .wrapper { height: 100%; position: relative; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear; z-index: 11; }
    .wrapper.active { background-color: #fff; height: 100%; left: 0; position: relative; perspective: 1000px; transform-style: preserve-3d; -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg); -moz-transform: translate3d(100px, 0, -600px) rotateY(-20deg); -ms-transform: translate3d(100px, 0, -600px) rotateY(-20deg); -o-transform: translate3d(100px, 0, -600px) rotateY(-20deg); transform: translate3d(100px, 0, -600px) rotateY(-20deg); width: 100%; z-index: 10; }

    /*------- Wrapper Section Ends -------*/

    /*------- Chart Section Starts -------*/

    .bg-chart-home { padding: 15px; }
    .box-chart-home { background-color: #ffffff; -webkit-border-radius: 4px 18px; -moz-border-radius: 4px 18px; -ms-border-radius: 4px 18px; -o-border-radius: 4px 18px; border-radius: 4px 18px; -webkit-box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); -moz-box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); -ms-box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); -o-box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); padding: 15px; }
    .box-chart-info-home { border-left: 1px solid #d7d7d7; margin-bottom: 15px; padding-left: 15px; }
    .box-chart-info-home:last-child { margin-bottom: 0; }
    .box-chart-info-home > h6 { color: #000000; font: 1.4rem/1.4 "Montserrat-Light"; margin-bottom: 5px; }
    .box-chart-info-home > h3 { color: #021e7d; font: 1.6rem/1.4 "Montserrat-Medium"; }
    .box-chart-info-home > h3 > span { font-family: "Montserrat-Regular"; } 
    .circle-progressbar-info { color: #021e7d; font: 2.4rem/1.42857143 "Montserrat-SemiBold"; left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
  .tar-achieve-chart { -webkit-filter: drop-shadow( -4px 0px 4px rgba(0, 0, 0, .4)); filter: drop-shadow( -4px 0px 4px rgba(0, 0, 0, .4)); }

    /*------- Chart Section Ends -------*/

    /*------- Attendance Button Section Starts -------*/
    
    .bg-attendance-home { padding: 15px; }
    .box-attendance-icon-circle { background-color: #f70050; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; -webkit-box-shadow: 0px 10px 13px -7px #00000070, 5px 5px 15px 5px rgba(0,0,0,0); -moz-box-shadow: 0px 10px 13px -7px #00000070, 5px 5px 15px 5px rgba(0,0,0,0); -ms-box-shadow: 0px 10px 13px -7px #00000070, 5px 5px 15px 5px rgba(0,0,0,0); -o-box-shadow: 0px 10px 13px -7px #00000070, 5px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 10px 13px -7px #00000070, 5px 5px 15px 5px rgba(0,0,0,0); display: inline-block; height: 60px; margin: 0 auto; position: relative; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear; width: 60px; }
    .box-attendance-icon-circle.active { background-color: #2681ff; width: 100%; }
    .box-attendance-icon-circle::before { color: #ffffff; content: "\f577"; display: block; font-family: "Font Awesome 5 Pro"; font-size: 2.4rem; font-weight: 900; left: 50%; line-height: 50px; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
    .box-attendance-icon-circle.active::before { color: #ffffff; content: "PRESENCE"; font: 1.6rem/1.5 "Montserrat-Light"; }

    /*------- Attendance Button Section Ends -------*/

    /*------- Dashboard Section Starts -------*/

    .bg-dashboard-home { padding: 15px 15px 0; }
    .box-card { background-color: #2681ff45; -webkit-border-radius: 4px 18px; -moz-border-radius: 4px 18px; -ms-border-radius: 4px 18px; -o-border-radius: 4px 18px; border-radius: 4px 18px; -webkit-box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); -moz-box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); -ms-box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); -o-box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); display: block; margin-bottom: 10px; padding: 13px; }
    .sky-blue-gradient { background: #00c6ff; background: -webkit-linear-gradient(to right, #0072ff, #00c6ff); background: -moz-linear-gradient(to right, #0072ff, #00c6ff); background: -ms-linear-gradient(to right, #0072ff, #00c6ff); background: -o-linear-gradient(to right, #0072ff, #00c6ff); background: linear-gradient(to right, #0072ff, #00c6ff); }
    .dark-green-gradient { background: #11998e; background: -webkit-linear-gradient(to right, #11998e, #38ef7d); background: -moz-linear-gradient(to right, #11998e, #38ef7d); background: -ms-linear-gradient(to right, #11998e, #38ef7d); background: -o-linear-gradient(to right, #11998e, #38ef7d); background: linear-gradient(to right, #11998e, #38ef7d); }
    .dark-pink-gradient { background: -webkit-linear-gradient(to left, #f80759, #d0084e); background: -moz-linear-gradient(to left, #f80759, #d0084e); background: -ms-linear-gradient(to left, #f80759, #d0084e); background: -o-linear-gradient(to left, #f80759, #d0084e); background: linear-gradient(to left, #f80759, #d0084e); }
    .dark-purple-gradient { background: -webkit-linear-gradient(to right, #6a3093, #a044ff); background: -moz-linear-gradient(to right, #6a3093, #a044ff); background: -ms-linear-gradient(to right, #6a3093, #a044ff); background: -o-linear-gradient(to right, #6a3093, #a044ff); background: linear-gradient(to right, #6a3093, #a044ff); }
    .dark-orange-gradient { background: -webkit-linear-gradient(to right, #f12711, #FF5722); background: -moz-linear-gradient(to right, #f12711, #FF5722); background: -ms-linear-gradient(to right, #f12711, #FF5722); background: -o-linear-gradient(to right, #f12711, #FF5722); background: linear-gradient(to right, #f12711, #FF5722); }
    .dark-yellow-gradient { background: -webkit-linear-gradient(to right, #fbb034, #ffdd00); background: -moz-linear-gradient(to right, #fbb034, #ffdd00); background: -ms-linear-gradient(to right, #fbb034, #ffdd00); background: -o-linear-gradient(to right, #fbb034, #ffdd00); background: linear-gradient(to right, #fbb034, #ffdd00); }
    .turquoise-gradient { background: linear-gradient(to right, #006766, #0eb8b7); }
    .navy-blue-gradient { background: linear-gradient(to right, #233d4e, #568fb5); }
    .box-card-heading-desc > p { color: #444; font: 1.4rem/1.5 "Montserrat-Regular"; }
    .box-card-heading-desc > p > span { display: block; }
    .box-card-heading-desc > h3 { color: #00ac5e; font: 1.8rem/1.1 "Montserrat-SemiBold"; margin-bottom: 5px; }
    .box-card-icon { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0px 10px 13px -7px #00000050, 5px 5px 15px 5px rgba(0,0,0,0); -moz-box-shadow: 0px 10px 13px -7px #00000050, 5px 5px 15px 5px rgba(0,0,0,0); -ms-box-shadow: 0px 10px 13px -7px #00000050, 5px 5px 15px 5px rgba(0,0,0,0); -o-box-shadow: 0px 10px 13px -7px #00000050, 5px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 10px 13px -7px #00000050, 5px 5px 15px 5px rgba(0,0,0,0); height: 50px; margin-bottom: 15px; width: 50px; }
    .box-card-icon > i { color: #ffffff; display: block; font-size: 1.8rem; line-height: 50px; text-align: center; }

    /*------- Dashboard Section Ends -------*/

/*------- Home Page Ends -------*/

/*------- Attendance Page Starts -------*/

  /*------- Attendance View Section Starts -------*/

  .bg-attendance-view { padding: 15px 15px 0; }
  .box-card-attendance-view { background: #11998e; background: -webkit-linear-gradient(to right, #11998e, #38ef7d); background: -moz-linear-gradient(to right, #11998e, #38ef7d); background: -ms-linear-gradient(to right, #11998e, #38ef7d); background: -o-linear-gradient(to right, #11998e, #38ef7d); background: linear-gradient(to right, #11998e, #38ef7d); padding: 30px; }
  .present-days > p { color: #000; font: 1.4rem/1.4 "Montserrat-Light"; margin-bottom: 15px; }
  .present-days > p > span { display: block; }
  .present-absent-days-icon > i { color: #000; font-size: 4rem; }
  .present-absent-num > p { color: #fff; font: 3rem/1 "Montserrat-Regular"; }
  .present-absent-num > p > sub { color: #000; font-size: 1.4rem; position: relative; top: 0; }
  .present-absent-num > p > span { color: #000; font-size: 1.6rem; position: relative; top: -5px; }

  /*------- Attendance View Section Ends -------*/

  /*------- Attendance Listing Section Starts -------*/

  .attendance-date-display > p { color: #444; font: 1.6rem/1.8 "Montserrat-Regular"; }
  .attendance-pre-display > p,
  .attendance-abs-display > p { background-color: #2681ff; -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; color: #fff; padding: 5px 10px; text-align: center; }
  .attendance-abs-display > p { background-color: #f00; }
  .attendance-pre-display > p > i,
  .attendance-abs-display > p > i { padding-left: 3px; }

  /*------- Attendance Listing Section Ends -------*/

/*------- Attendance Page Ends -------*/

/*------- Live Location Page Starts -------*/

.bg-live-location { padding: 15px; }
.map-display { height: calc(100vh - 70px); width: 100%; }

/*------- Live Location Page Ends -------*/

/*------- Dealer and Farmer Page Starts -------*/

  /*------- Form Section Starts -------*/

  .bg-dea-far-form { padding: 15px; }
  .dea-far-heading > h1 { color: #000000; font: 1.8rem/1.4 "Montserrat-Medium"; }
  .dea-far-heading-1 > h1 { background-color: #ffffff; -webkit-border-radius: 4px 18px; -moz-border-radius: 4px 18px; -ms-border-radius: 4px 18px; -o-border-radius: 4px 18px; border-radius: 4px 18px; box-shadow: inset 4px 0 0 0 #444; color: #444; font: 1.8rem/1.4 "Montserrat-Medium"; margin-bottom: 15px; padding: 10px 15px; text-transform: uppercase; }
  .dea-far-heading-2 > h1 { background-color: #ffffff; box-shadow: inset 4px 0 0 0 #2681ff; color: #2681ff; font: 1.8rem/1.4 "Montserrat-Medium"; margin-bottom: 15px; padding: 10px 15px; text-transform: uppercase; }
  .dea-far-heading-3 > h1 { background-color: #ffffff; border-radius: 10px 10px 0 0; box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0), inset 0 5px 0 0 #2681ff; color: #2681ff; font: 1.8rem/1.4 "Montserrat-Medium"; margin-bottom: 15px; padding: 10px 15px 5px; text-transform: uppercase; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -ms-border-radius: 10px 10px 0 0; -o-border-radius: 10px 10px 0 0; }
  .dea-far-heading-4 > h1 { box-shadow: inset 4px 0 0 0 #444; color: #444; font: 1.8rem/1 "Montserrat-Medium"; margin-bottom: 15px; padding: 0px 15px; text-transform: uppercase; }

    /*------- Custom Input File Upload Image CSS Starts -------*/

.avatar-upload { margin: 15px auto; max-width: 205px; position: relative; }
.avatar-upload .avatar-edit { position: absolute; right: 12px; top: 10px; z-index: 1; }
.avatar-upload .avatar-edit input { display: none; }
.avatar-upload .avatar-edit input + label { background-color: #f2f1f7; border: 4px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; cursor: pointer; display: inline-block; height: 50px; margin-bottom: 0; width: 50px; }
.avatar-upload .avatar-edit input + label:hover { background-color: #f2f1f7; }
.avatar-upload .avatar-edit input + label::after { color: #444; content: "\f040"; font-family: 'Font Awesome 5 Pro'; font-size: 1.6rem; font-weight: 900; left: 50%; position: absolute; top: 48%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.avatar-upload .avatar-preview { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0px 10px 13px -7px #00000014, 5px 5px 15px 5px rgba(0,0,0,0); -moz-box-shadow: 0px 10px 13px -7px #00000014, 5px 5px 15px 5px rgba(0,0,0,0); -ms-box-shadow: 0px 10px 13px -7px #00000014, 5px 5px 15px 5px rgba(0,0,0,0); -o-box-shadow: 0px 10px 13px -7px #00000014, 5px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 10px 13px -7px #00000014, 5px 5px 15px 5px rgba(0,0,0,0); height: 192px; position: relative; width: 192px; }
.avatar-upload .avatar-preview > div { border: 6px solid #ffffff; background-position: top; background-repeat: no-repeat; background-size: cover; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; height: 192px; width: 192px; }

    /*------- Custom Input File Upload Image CSS Ends -------*/

  /*------- Form Section Ends -------*/

/*------- Dealer and Farmer Page Ends -------*/

/*------- Meeting Page Starts -------*/

    /*------- All Data Informations Listing Section Starts -------*/

    .bg-all-data-info-listing { padding: 15px 15px 0; }

    /*------- All Data Informations Listing Section Ends -------*/

/*------- Meeting Page Ends -------*/

/*------- New Meetings Page Starts -------*/

.bg-far-dea-btn-sec { padding: 15px 15px 0; }
.form-group-meeting-proj { margin-bottom: 15px; }
.box-add-num-icon-circle { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; font-size: 1.8rem; height: 50px; padding: 0; width: 50px; }
.box-add-num-icon-circle > a { display: block; }
.box-add-num-icon-circle > a > i { color: #fff; line-height: 50px; }
.box-sel-far-dea-meetings > div { display: none; }
.sel-far-meeting-data { margin: 15px 0; }
.far-dea-meet-all-info > h4 { color: #444; font: 1.6rem/1.4 "Montserrat-Medium"; margin-bottom: 5px; }
.far-dea-meet-all-info > address > p,
.far-dea-meet-all-info > p { color: #444; font: 1.4rem/1.7 "Montserrat-Light"; margin-bottom: 5px; }
.far-dea-meet-all-info > p > span { font-family: "Montserrat-Medium"; }
.far-dea-meet-all-info > p:last-child { margin-bottom: 0; }
.far-dea-meet-all-info > p > i { padding-right: 3px; }

/*------- New Meetings Page Ends -------*/

/*------- Update Meeting Page Starts -------*/

  /*------- Update Meeting Heading and Form Section Starts -------*/

  .update-meeting-heading > h1 { margin-bottom: 30px; }
  .box-sel-circle-icon { background-color: #f2f1f7; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; height: 50px; margin: 0 auto 10px; width: 50px; }
  .box-sel-circle-icon > i { color: #ffffff; display: block; font-size: 1.6rem; line-height: 50px; text-align: center }
  .box-sel-ihn > h4 { color: #444; font: 1.4rem/1.4 "Montserrat-Medium"; margin-bottom: 5px; text-align: center; }
  .box-sel-ihn > p { color: #444; font: 1.6rem/1.8 "Montserrat-Light"; text-align: center; }
  input[class="form-take-pic"] { display: none; }
  input[class="form-take-pic"] + span { background-color: #2681ff; color: #fff; display: block; font: 1.4rem/1 "Montserrat-Light"; padding: 10px 15px; text-align: center; }

    /*------- Custom Input File - 2 CSS Starts -------*/

    .input-file-container { position: relative; }
    .js .input-file-trigger { background-color: #2681ff; color: #fff; cursor: pointer; display: block; font: 1.6rem/1 "Montserrat-Light"; padding: 10px 15px; text-align: center; }
    .js .input-file { cursor: pointer; left: 0; opacity: 0; padding: 15px 0; position: absolute; top: 0; width: 100%; }
    .file-return { margin: 0; }
    .file-return:not(:empty) { margin: 1em 0; }
    .js .file-return { color: #444; font: 1.4rem/1.4 "Montserrat-Light"; } .js .file-return:not(:empty)::before { content: ""; color: #444; font: 1.4rem/1.4 "Montserrat-Light"; }
    
    /*------- Custom Input File - 2 CSS Ends -------*/

  .form-center-left-heading > h4 { color: #000; font: 1.8rem/1 "Montserrat-Medium"; margin-bottom: 15px; }

    /*------- Custom Datepicker CSS Starts -------*/

    .form-control-datepicker[readonly] { background-color: transparent; }
    .input-group-addon-datepicker,
    .input-group-addon-clockpicker { background-color: transparent; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; border-bottom: 1px solid #444; color: #444; padding: 0; }
    #datepicker { width: 100%; }
    #datepicker > span:hover { cursor: pointer; }
    .datepicker.dropdown-menu td,
    .datepicker.dropdown-menu th { font-family: "Montserrat-Light"; }
    .datepicker.dropdown-menu { border: 1px solid #444; }
    .datepicker-dropdown.datepicker-orient-bottom::before { border-top: 7px solid #444; }
    .datepicker table tr td.today { background: -webkit-linear-gradient(to right, #2681ff, #005fe0); background: -moz-linear-gradient(to right, #2681ff, #005fe0); background: -ms-linear-gradient(to right, #2681ff, #005fe0); background: -o-linear-gradient(to right, #2681ff, #005fe0); background: linear-gradient(to right, #2681ff, #005fe0); color: #fff; }
    .datepicker table tr td.active { background: -webkit-linear-gradient(to right, #2681ff, #005fe0); background: -moz-linear-gradient(to right, #2681ff, #005fe0); background: -ms-linear-gradient(to right, #2681ff, #005fe0); background: -o-linear-gradient(to right, #2681ff, #005fe0); background: linear-gradient(to right, #2681ff, #005fe0); }

    /*------- Custom Datepicker CSS Ends -------*/

    /*------- Custom Clockpicker CSS Starts -------*/

    .clockpicker-popover .popover-title,
    .clockpicker-tick,
    .clockpicker-button { font-family: "Montserrat-Light"; font-weight: normal; letter-spacing: 1px; }
    .clockpicker-popover .popover-title span.text-primary { color: #2681ff; }
    .clockpicker-canvas line { stroke: #2681ff; }
    .clockpicker-canvas-bearing,
    .clockpicker-canvas-bg,
    .clockpicker-canvas-fg { fill: #2681ff; }

    /*------- Custom Clockpicker CSS Ends -------*/

  /*------- Update Meeting Heading and Form Section Ends -------*/

/*------- Update Meeting Page Ends -------*/

/*------- Downloads Page Starts -------*/

  /*------- Downloads Section Starts -------*/

  .bg-downalods-pg { padding: 15px; }
  .downloads-heading > h1 { color: #fff; font: 2.6rem/1 "Montserrat-Regular"; }
  .downloads-circle { background-color: #ffffff52; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; height: 40px; width: 40px; }
  .downloads-circle > a { display: block; }
  .downloads-circle > a > i, .downloads-circle > i { color: #000; display: block; line-height: 40px; text-align: center; }

  /*------- Downloads Section Ends -------*/

/*------- Downloads Page Ends -------*/

/*------- Sales Executive Profile Page Starts -------*/

  /*------- Profile Section Starts -------*/

  .bg-sep-ihd { padding: 50px 15px 0; }
  .border-right-sepp { border-right: 1px solid #eee; }
  .box-card-sep { background-color: #f1f1f7; }
  .box-se-info-pro { padding: 35px 15px 15px; }
  .box-se-pro-pos { left: 50%; position: absolute; top: -25px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); }
  .box-se-pro-pos > img { border: 4px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }
  .box-se-info-pro > h4 { color: #444; font: 1.6rem/1 "Montserrat-Medium"; margin-bottom: 10px; text-align: center; }
  .box-se-info-pro > p { border-bottom: 1px solid #eee; color: #444; font: 1.2rem/1 "Montserrat-Regular"; margin-bottom: 15px; padding-bottom: 15px; text-align: center; }
  .box-se-tar-achie > h4 { color: #444; font: 1.6rem/1 "Montserrat-Medium"; margin-bottom: 10px; text-align: center; }
  .box-se-tar-achie > p { color: #444; font: 1.2rem/1 "Montserrat-Medium"; margin-bottom: 10px; text-align: center; }
  .box-se-inside-info > h4 { color: #444; font: 1.6rem/1 "Montserrat-Medium"; margin-bottom: 10px; position: relative; }
  .box-se-inside-info > h4:last-child { margin-bottom: 0; }
  .box-se-inside-info > h4 > i { padding-right: 3px; }
  .box-se-inside-info > h4 > span { color: #444; font: 1.6rem/1 "Montserrat-Regular"; }
  .box-ece-inside-info { position: relative; }
  .box-ece-inside-info > h4:first-child::before,
  .box-ece-inside-info > h4:nth-child(2)::before,
  .box-ece-inside-info > h4:nth-child(3)::before { content: "\f0e0"; font-family: "Font Awesome 5 Pro"; font-weight: 900; left: 0; position: absolute; top: 0; }
  .box-ece-inside-info > h4 { padding-left: 25px; }
  .box-ece-inside-info > h4 > p { color: #444; font: 1.4rem/1 "Montserrat-Regular"; margin: 10px 0 15px; }
  .box-ece-inside-info > h4:nth-child(2)::before { content: "\f879"; }
  .box-ece-inside-info > h4:nth-child(3)::before { content: "\f2a0"; }
  .box-se-inside-info > address > p { color: #444; font: 1.4rem/1.7 "Montserrat-Regular"; padding-left: 25px; position: relative; }
  .box-se-inside-info > address > p::before { content: "\f21d"; font-family: "Font Awesome 5 Pro"; font-weight: 900; left: 0; position: absolute; top: 0; }

  /*------- Profile Section Ends -------*/

/*------- Sales Executive Profile Page Ends -------*/

/*------- Sales Executive List Page Starts -------*/

.location-attendance-listing { padding: 10px 20px; text-align: center; }
.location-attendance-listing > li { display: inline-block; margin-right: 25px; }
.location-attendance-listing > li:last-child { margin-right: 0; }
.location-attendance-listing > li > a { background-color: transparent; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; color: #000; display: block; font: 1.8rem/1 "Montserrat-Light"; height: 40px; line-height: 40px; position: relative; text-align: center; width: 40px; }
.location-attendance-listing > li:not(:first-child) > a { background-color: #f2f1f7; -webkit-box-shadow: 0px 8px 8px -8px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); -moz-box-shadow: 0px 8px 8px -8px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); -ms-box-shadow: 0px 8px 8px -8px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); -o-box-shadow: 0px 8px 8px -8px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); box-shadow: 0px 8px 8px -8px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); }
.location-attendance-listing > li:first-child > a::before,
.location-attendance-listing > li:first-child > a::after { -webkit-animation: pulseAni 2s infinite linear; -moz-animation: pulseAni 2s infinite linear; -ms-animation: pulseAni 2s infinite linear; -o-animation: pulseAni 2s infinite linear; animation: pulseAni 2s infinite linear; border: 2px solid #f00; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; bottom: -20px; content: ""; left: -20px; opacity: 0; position: absolute; right: -20px; top: -20px;  }
.location-attendance-listing > li:first-child > a::after { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -ms-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; }
@-webkit-keyframes pulseAni {
  0% { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); }
  50% { opacity: 1; }
  100% { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); }
}
@-moz-keyframes pulseAni {
  0% { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); }
  50% { opacity: 1; }
  100% { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); }
}
@-ms-keyframes pulseAni {
  0% { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); }
  50% { opacity: 1; }
  100% { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); }
}
@-o-keyframes pulseAni {
  0% { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); }
  50% { opacity: 1; }
  100% { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); }
}
@keyframes pulseAni {
  0% { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); }
  50% { opacity: 1; }
  100% { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); }
}

/*------- Sales Executive List Page Ends -------*/

/*------- Orders Page Starts -------*/

  /*------- Order Popup Section Starts -------*/

  .box-od-popup { bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 12; }
  .box-order-popup-1,
  .box-order-popup-2,
  .box-order-popup-3 { display: none; }
  .box-order-popup-1.active,
  .box-order-popup-2.active,
  .box-order-popup-3.active { display: block; }
  .bg-od-popup { background-color: #fff; -webkit-border-radius: 4px 18px; -moz-border-radius: 4px 18px; -ms-border-radius: 4px 18px; -o-border-radius: 4px 18px; border-radius: 4px 18px; left: 50%; padding: 30px; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 85%; }
  .bg-od-popup-close { position: absolute; right: -15px; top: -15px; }
  .bg-od-popup-close > a { background-color: #fff; border: 2px solid #fff; border-radius: 50%; -webkit-box-sizing: content-box; box-sizing: content-box; display: block; height: 40px; text-align: center; width: 40px; }
  .bg-od-popup-close > a > i { color: #000; font-size: 2rem; line-height: 40px; }
  .box-od-info > h3 { border-bottom: 1px solid #000; color: #000; display: inline-block; font: 2rem/1 "Montserrat-Medium"; margin-bottom: 15px; padding-bottom: 15px; }
  .od-listing { max-height: 290px; overflow-y: scroll; padding-right: 15px; }
  .od-listing > li { border-bottom: 1px solid #ccc; color: #000; display: block; font: 1.6rem/1.4 "Montserrat-Light"; margin-bottom: 10px; padding-bottom: 10px; position: relative; }
  .od-listing > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  .od-listing > li > span { position: absolute; right: 0; }

  /*------- Order Popup Section Ends -------*/ 

  /*------- New Orders Page Starts -------*/

.bg-new-orders-form { padding: 15px; }
.dealer-heading-new-order-pg { margin-bottom: 30px; }
.input-add,
.input-remove { color: #b5b5b5; font-size: 1.8rem; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.input-add:focus { color: #b5b5b5; }

  /*------- New Orders Page Ends -------*/

/*------- Orders Page Ends -------*/

/*------- Demonstration Page Starts -------*/

  /*------- Demonstration Popup Section Starts -------*/

  .box-od-popup { bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 12; }
  .box-demo-popup-1,
  .symptoms-demo-popup,
  .diagnosis-demo-popup,
  .abcdiagnosis-demo-popup,
  .familyhisory-demo-popup,
  .pasthisory-demo-popup,
  .presenthisory-demo-popup,
  .investigation-demo-popup,
  .xray-demo-popup,
  .procedure-demo-popup,
  .totalcharge-demo-popup,
  .receivedamount-demo-popup,
  .box-demo-popup-2,
  .box-demo-popup-3,
  .box-demo-popup-4 { display: none; }
  .box-demo-popup-1.active,
  .symptoms-demo-popup.active,
  .diagnosis-demo-popup.active,
  .abcdiagnosis-demo-popup.active,
  .familyhisory-demo-popup.active,
  .pasthisory-demo-popup.active,
  .presenthisory-demo-popup.active,
  .investigation-demo-popup.active,
  .xray-demo-popup.active,
  .procedure-demo-popup.active,
  .totalcharge-demo-popup.active,
  .receivedamount-demo-popup.active,
  .box-demo-popup-2.active,
  .box-demo-popup-3.active,
  .box-demo-popup-4.active { display: block; }
  .bg-od-popup { background-color: #fff; -webkit-border-radius: 4px 18px; -moz-border-radius: 4px 18px; -ms-border-radius: 4px 18px; -o-border-radius: 4px 18px; border-radius: 4px 18px; left: 50%; padding: 15px; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 85%; }
  .bg-od-popup-close { position: absolute; right: -15px; top: -15px; }
  .bg-od-popup-close > a { background-color: #fff; border: 2px solid #fff; border-radius: 50%; -webkit-box-sizing: content-box; box-sizing: content-box; display: block; height: 40px; text-align: center; width: 40px; }
  .bg-od-popup-close > a > i { color: #000; font-size: 2rem; line-height: 40px; }
  .box-od-info > h3 { border-bottom: 1px solid #000; color: #000; display: inline-block; font: 2rem/1 "Montserrat-Medium"; margin-bottom: 15px; padding-bottom: 15px; }
  .od-listing { max-height: 290px; overflow-y: scroll; padding-right: 15px; }
  .od-listing > li { border-bottom: 1px solid #ccc; color: #000; display: block; font: 1.6rem/1.8 "Montserrat-Light"; margin-bottom: 10px; padding-bottom: 15px; position: relative; font-weight: bold; }
  .od-listing > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
  .od-listing > li > span { position: absolute; right: 0; }

  /*------- Demonstration Popup Section Ends -------*/ 
  
  /*------- New Demonstration Section Starts -------*/

  .box-card-new-demo { margin-bottom: 30px; height:100%; }

  /*------- New Demonstration Section Ends -------*/

/*------- Demonstration Page Ends -------*/

.od-listing1 { max-height: 290px; overflow-y: scroll;}
.button-group-pills .btn {
  border-radius: 20px;
  /* line-height: 1.2; */
  margin-bottom: 15px;
  /* margin-left:   10px; */
  border-color: rgb(187, 187, 187);
  background-color: #fff;
  color: #2681ff;
}
.btn.active {
  border-color:     #2681ff;
  background-color: #2681ff;
  color:            #fff;
  box-shadow: none;
}

.symptoms-sub-checkbox {
  margin-top: 5px;
}



@media only screen and (max-width: 900px) and (orientation: landscape) {

/*------- Home Page Starts -------*/

.fixed-sidebar-mobile { height: 100%; overflow-y: scroll; }

/*------- Home Page Ends -------*/

}

  /*------- Fixed Label Textbox CSS Starts ( Just add label-fixed class to label ) -------*/

.label-fixed {
  font-size: 1.2rem;
  top: 0;
  transform: translateY(-65%);
  -webkit-transform: translateY(-65%);
  -moz-transform: translateY(-65%);
  -ms-transform: translateY(-65%);
  -o-transform: translateY(-65%);
}

  /*------- Fixed Label Textbox CSS CSS Ends -------*/

.selectt {
    color: #fff;
    padding: 30px;
    display: none;
    margin-top: 30px;
    width: 60%;
    background: green
}


/* prescription CSS starts */
.document-container {
  position: relative;
  padding: 10px;
  overflow-y: scroll;
}
.document-info-contaiener {
  border-bottom: 2px dotted #000;
}
.title, .sub-title {
  color: #2681ff;
}
.sub-title {
  margin-top: 10px;
}
.title {
  margin-top: 5px;
}
.document-hos-info {
  margin-top: 10px;
  border-left: 2px dotted #000;
}
.document-doc-pera {
  font-size: 1rem;
}
.document-date {
  display: flex;
  margin: 10px 0;
  justify-content: flex-end;
}
.rx-img {
  width: 25px;
  margin: 20px 0;
}
.rx-img img {
  width: 100%;
  height: 100%;
}
.ordered-list ol li {
  margin-top: 10px;
}
.ordered-list ol li {
  list-style-type: decimal;
  display: list-item;
}
.document-watermark {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.document-watermark img {
  width: 100%;
  opacity: 0.3;
  z-index: -1;
}
.document-sign {
  display: flex;
  justify-content: flex-end;
}
.document-sign img {
  width: 30%;
}
/* prescription CSS ends */


/* tabs css starts */
.tabs {
  width: 100%;
  height: auto;
}
.tabs .tab-header {
  width: 100%;
  
  display: flex;
  overflow-x: scroll;
}
.tabs .tab-header > div {
  position: relative;
  width: 100%;
  /* text-align: center; */
  padding: 10px;
  z-index: 2;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.tabs .tab-header > div.active {
  color:#005fe0;
}
.tabs .tab-indicator {
  position: absolute;
  width: calc(25% - 5px);
  height: 40px;
  top: 10px;
  left: 10px;
  border-radius: 20px;
  transition: all 300ms ease-in-out;
}
.tabs .tab-body {
  position: relative;
  padding: 10px 10px 16px 10px;
  border-top: 1px solid #ddd;
  height: calc(100% - 10px);
  overflow: hidden;
}
.tabs .tab-body > div {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  top:-100%;
  transform: translateY(-10px);
  transition: opacity 300ms ease-in-out,transform 300ms ease-in-out;
}
.tabs .tab-body > div.active {
  position: relative;
  transform: translateY(0px);
  top: 30px;
  opacity: 1;
}
.btn-proj1 { background: -webkit-linear-gradient(to right, #2681ff, #005fe0); background: -moz-linear-gradient(to right, #2681ff, #005fe0); background: -ms-linear-gradient(to right, #2681ff, #005fe0); background: -o-linear-gradient(to right, #2681ff, #005fe0); background: linear-gradient(to right, #2681ff, #005fe0); border: 0; -webkit-border-radius: 4px 18px; -moz-border-radius: 4px 18px; -ms-border-radius: 4px 18px; -o-border-radius: 4px 18px; border-radius: 4px 18px; box-shadow: 0px 10px 13px -7px #0000002e, 5px 5px 15px 5px rgba(0,0,0,0); color: #ffffff; display: block; font-family: "Montserrat-Medium"; font-size: 1.2rem; letter-spacing: 0.5px; margin: 0 auto 15px; padding: 10px 15px; text-align: center; text-transform: uppercase; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; transition: 0.5s linear; width: 75%; }
.medicine-title {
  font-weight: bold;
  font-size: 1.8rem;
  padding-bottom: 3px;
}
.medicine {
  padding: 5px;
}
.prev-card-margin {
  margin-bottom: 10px;
}

/* tabs css ends */