@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
@font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: local("Material Icons"), local("MaterialIcons-Regular"), url("https://example.com/MaterialIcons-Regular.woff2") format("woff2"), url("https://example.com/MaterialIcons-Regular.woff") format("woff"), url("https://example.com/MaterialIcons-Regular.ttf") format("truetype"); }
body { outline: 0px; border: 0px; padding: 0px; margin: 0px; font-family: Roboto, sans-serif; color: rgb(32, 37, 49); }
html{outline: 0px; border: 0px;}
.condition-tabs-wrapper {
    border: 0;
    outline: 0;
}
.login-body-inner { width: 850px; box-sizing: border-box; margin: 0px auto; padding: 3rem 7rem; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 20px; }
.login-body {background: rgb(255, 255, 255);min-height: 91vh;display: flex;align-items: center;padding-bottom: 45px;}
.login-logo img {width: 337px;margin: 0px auto;}
.login-logo {text-align: center;margin-bottom: 0;}
footer.footer-wrapper { bottom: 0px; width: 100%; left: 0px; right: 0px; border-top: 1px solid rgba(34, 38, 47, 0.07); }
footer.footer-wrapper p { color: rgb(34, 38, 47); font-size: 16px; font-weight: 300; margin: 0px; padding: 20px 0px; }
.login-form h2 {text-align: center;padding: 0px 0px 20px;font-size: 2rem;color: rgb(71 67 68);font-weight: 700;}
.form-control { padding: 10px 15px; min-height: 48px; border-radius: 5px; font-weight: 400; font-size: 15px; }
.btn-primary {background: rgb(71 67 68);border-color: rgb(71 67 68);border-radius: 4px !important;width: 220px;min-height: 48px;height: 48px;display: flex;align-items: center;justify-content: center;}
.login-form .btn {margin: 0px auto;padding: 11px 10px;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {background-color: rgb(52 48 49);border-color: rgb(52 48 49);box-shadow: none !important;}
.form-control:focus { box-shadow: rgba(60, 74, 88, 0.24) 0px 0px 6px; border: 1px solid rgb(206, 212, 218); }
.forgot-password .form-check-label { color: rgb(60, 74, 88); text-decoration: none; font-size: 14px; }
.forgot-password .form-check-label:hover { text-decoration: underline; }
.forgot-password { margin-top: 0.5rem; }
.login-form-inner .form-group { position: relative; overflow: hidden; }
.login-form-inner .form-group span.material-symbols-outlined { position: absolute; bottom: 0px; top: 0px; display: flex; align-items: center; width: 50px; justify-content: center; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 1px solid rgb(206, 212, 218); }
.login-form-inner .form-control { padding-left: 60px; }
.user-account {text-align: center;padding-bottom: 2rem;padding-top: .5rem;}
.user-account .dropdown-toggle {display: flex;align-items: center;color: rgb(71 67 68);padding: 4px 10px;font-size: 15px;text-align: center;margin: 0px auto;border: 1px solid hsl(345deg 3% 27% / 17%);background: rgb(249 248 248);font-weight: 400;box-shadow: none !important;}
.user-account .dropdown-toggle span {margin-right: 5px;font-size: 40px;color: rgb(71 67 68);}
.user-account .dropdown-toggle::after { margin-left: 7px; }
.dropdown-menu { min-width: 190px; }
.user-account .dropdown-menu li a {display: flex;align-items: center;color: rgb(71 67 68);font-size: 15px;padding: 10px;}
.user-account .dropdown-menu li a span { margin-right: 5px; }
.user-account .dropdown-menu {padding: 0px;border: 0;box-shadow: 0px 0px 10px rgb(0 0 0 / 9%);border-radius: 4px;}
.user-account .dropdown-menu li a:active { background: none; }
.login-form-inner .form-floating > label { padding-left: 69px; }
.location-selector-page .login-form h2 { padding-bottom: 6px; }
.location-form-inner span.input-group-text { min-height: 48px; border-bottom-left-radius: 0px; border-top-left-radius: 0px; align-items: center; justify-content: center; cursor: pointer; background: none !important; display: flex !important; }
.datepicker-dropdown { min-width: 240px; padding: 15px; }
.datepicker .next, .datepicker .prev {background: rgb(71 67 68);color: rgb(255, 255, 255);font-size: 15px;display: flex;align-items: center;justify-content: center;padding: 12px;margin-bottom: 15px;}
.datepicker .datepicker-switch {font-size: 14px;position: relative;top: -4px;height: auto;}
.reports-tabs-wrapper { margin-top: 2rem; }
.reports-tabs-wrapper .tab-content { padding: 1rem 0rem 0rem; }
.reports-nav-tabs .nav-link {font-size: 18px;border-width: 1px 1px 0px;border-top-style: solid;border-right-style: solid;border-left-style: solid;border-top-color: rgb(206, 212, 218);border-right-color: rgb(206, 212, 218);border-left-color: rgb(206, 212, 218);border-image: initial;margin-right: 10px;border-bottom-style: initial;border-bottom-color: initial;border-top-left-radius: 4px;border-top-right-radius: 4px;background: rgb(71 67 68);color: rgb(255, 255, 255);padding: 10px 20px;}
.reports-nav-tabs .nav-link.active, .reports-nav-tabs .nav-link:hover {color: rgb(71 67 68);border-color: rgb(71 67 68);background: rgb(255, 255, 255);}
p {font-size: 16px;font-weight: 400;color: rgb(32, 37, 49);}
.reports-page { height: auto; }
.reports-page .login-body-inner { padding: 3rem 5rem; margin-top: 2rem; }
.radio-group { display: flex; justify-content: flex-start; align-items: center; }
.radio-heading h3 {margin: 0px;padding: 0px;font-size: 1.3rem;color: rgb(44 40 41);font-weight: 700;}
.radio-group .form-check {margin-bottom: 0px;margin-right: 2rem;min-width: 100px;}
.form-check-input:focus { box-shadow: inherit; }
.radio-group .form-check label.form-check-label { cursor: pointer; }
.block-flex { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; }
.block-lines span {font-size: 14px;color: rgb(71 67 68);}
.block-content { min-width: 310px; }
.block-lines { display: flex; justify-content: space-between; }
.block-heading { min-width: 140px; }
.block-flex-wrapper i { font-size: 12px; text-align: end; margin-left: auto; margin-top: 7px; color: rgb(32, 37, 49); }
.block-flex-wrapper { display: flex; flex-direction: column; }
.block-heading h6, .radio-heading h6 {font-size: 16px;color: rgb(71 67 68);font-weight: 500;margin: 0px;padding: 0px;}
.radio-group .form-check:last-child { margin-right: 0px; }
.radio-group-box .radio-group, .radio-group-box .block-flex-wrapper { margin: 25px 0px; }
.radio-heading { min-width: 141px; }
.block-lines input[type="number"]::-webkit-inner-spin-button { opacity: 1; }
.numberInputBox { position: relative; }
.numberInputBox input[type="number"] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; }
.numberInputBox input[type="number"]::-webkit-inner-spin-button, .numberInputBox input[type="number"]::-webkit-outer-spin-button {  -moz-appearance: none; -webkit-appearance: none; appearance: none;  }
.number-input { display: inline-flex; }
.number-input, .number-input * { box-sizing: border-box; }
.number-input button { outline: none; -moz-appearance: none; -webkit-appearance: none; appearance: none;  border-top: none; border-right: none; border-image: initial; align-items: center; justify-content: center; width: 2.5rem; cursor: pointer; margin: 0px; position: absolute; padding: 0px; right: 1px; height: 50%; border-bottom: 1px solid rgb(206, 212, 218); background: none; border-left: 1px solid rgb(206, 212, 218); }
.number-input input[type="number"] { text-align: left; outline: none; width: 100px; }
.number-input button.plus { bottom: 0px; border-bottom: 0px; border-bottom-right-radius: 5px; }
.number-input button span {font-size: 22px;color: rgb(71 67 68);}
.row-group-wrapper .radio-heading { margin-bottom: 10px; }
label.form-label { color: rgb(32, 37, 49); }
.row-group-wrapper { padding: 0px; }
.beach-status { justify-content: space-between; }
.number-input button:hover {background: rgb(71 67 68);}
.number-input button:hover span { color: rgb(255, 255, 255); }
.Beach-tabs-wrapper .row-group-wrapper label.form-label { min-height: 38px; line-height: 19px; padding-right: 57px; }
.Beach-tabs-wrapper .row-group-wrapper .col-6 { margin-top: 5px; }
.row-group-wrapper .radio-heading { display: flex; justify-content: space-between; align-items: center; }
.row-group-wrapper .radio-heading i { font-size: 14px; color: rgb(32, 37, 49); }
.row-group-wrapper .radio-heading.display-flex { display: flex; justify-content: space-around; }
.row-group-wrapper .radio-heading.display-flex .btn {margin-right: 0px;margin-left: auto;padding: 5px 20px;min-width: inherit;min-height: 40px;display: flex;align-items: center;}
.file-upload .image-box { margin: 0.4em auto 0px; height: 5em; width: 100%; background: rgb(255, 255, 255); cursor: pointer; overflow: hidden; border: 1px solid rgb(206, 212, 218); padding: 0px; }
.file-upload .image-box img { height: 100%; width: 100%; padding: 5px; }
.file-upload .image-box p { position: relative; top: 0px; color: rgb(206, 212, 218); margin: 0px; bottom: 0px; display: flex; align-items: center; justify-content: center; height: 100%; }
.upload-colom { padding: 0px; }
.upload-description { padding: 0px; }
.file-upload .image-box p span { font-size: 40px; }
.drag-text h3 span.material-symbols-outlined { font-size: 60px; }
.video-upload { background-color: rgb(255, 255, 255); width: 100%; text-align: center; overflow: hidden; }
.video-upload-btn { color: rgb(255, 255, 255); border: none; padding: 10px; transition: all 0.2s ease 0s; outline: none; margin: 0px auto; }
.video-upload-btn:hover { color: rgb(255, 255, 255); transition: all 0.2s ease 0s; cursor: pointer; }
.video-upload-btn:active { border: 0px; transition: all 0.2s ease 0s; }
.video-upload-content { display: none; text-align: center; border: 1px solid rgb(206, 212, 218); margin-bottom: 20px; overflow: hidden; height: 160px; position: relative; }
.video-upload-input { position: absolute; margin: 0px; padding: 0px; width: 100%; height: 100%; outline: none; opacity: 0; cursor: pointer; }
.video-upload-wrap { position: relative; border: 1px solid rgb(206, 212, 218); margin-bottom: 20px; overflow: hidden; height: 160px; }
.video-dropping, .video-upload-wrap:hover { border: 1px solid rgb(206, 212, 218); }
.video-title-wrap { padding: 0px 15px 15px; color: rgb(34, 34, 34); }
.drag-text { text-align: center; }
.drag-text h3 { font-weight: 100; text-transform: uppercase; color: rgb(206, 212, 218); height: 150px; display: flex; align-items: center; justify-content: center; }
.file-video-image { max-height: 200px; max-width: 200px; margin: auto; padding: 20px; }
.remove-image { width: auto; margin: 0px; color: rgb(255, 255, 255); background: rgb(205, 69, 53); border: none; padding: 5px 10px; border-radius: 4px; transition: all 0.2s ease 0s; outline: none; font-size: 13px; }
.remove-image:hover { background: rgb(193, 59, 42); color: rgb(255, 255, 255); transition: all 0.2s ease 0s; cursor: pointer; }
.remove-image:active { border: 0px; transition: all 0.2s ease 0s; }
.videouploadwrapper { margin-top: 40px; }
img.video-upload-image { width: 100%; height: 100%; padding: 5px; }
.image-title-wrap { position: absolute; right: 0px; bottom: 10px; left: 0px; }
span.image-title { display: none; }
.modal-header { border: 0px; padding: 0px; }
.modal-footer { border: 0px; display: flex; align-items: center; justify-content: center; }
.modal-footer .btn { min-width: 140px; min-height: 50px; }
.modal-body .areyouwant-box { text-align: center; padding: 10px 40px; }
.modal-body { padding-top: 0px; padding-bottom: 3rem; }
.modal-footer .btn.btn-light { border: 1px solid rgb(204, 204, 204); }
.modal-body .areyouwant-box span { font-size: 8rem; color: rgb(208, 217, 221); margin-bottom: 1rem; }
.modal-body .areyouwant-box p { font-size: 18px; }
.modal-header .btn-close { color: rgb(0, 0, 0); opacity: 1; padding: 31px; outline: 0px !important; box-shadow: inherit !important; }

.custom-video-wrapper #video {
    width: 100%;
    height: 400px;
}

.custom-video-wrapper #canvas {
    width: 725px;
    margin: 0px auto;
    height: 450px;
}

.mirrored {
    width: 1024px;
    height: 720px;
}

#innerVideo .video {
    width: 100%;
    height: 720px;
    object-fit: cover;
}

#previewVid .video {
    width: 1024px;
    height: 405px;
}

.button-list {
    display: flex; 
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.canvas-block {
    width: 100% !important;  
    height: auto !important;
}

.preview-list {
    margin-top: 20px; 
}

.preview-list .btn {
    margin-bottom: 10px;
}

.btn-light {
    border: solid 1px #ccc;
}

.equipment-list h3 {
    margin: 0px;
    padding: 0px;
    font-size: 1.3rem;
    color: rgb(71 67 68);
    font-weight: 700;
}

.equipment-list-wrapper {
    padding: 10px 0px;
}

.equipment-list p {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.equipment-list {
    display: flex;
    align-items: center;
}

.equipment-list-wrapper h4 {
    margin: 0px 0px 20px;
    padding: 0px;
    font-size: 1rem;
    color: rgb(71 67 68);
    font-weight: 700;
}

.user-account .dropdown-menu li a:hover {
    background: #fff;
}
.equipment-list-wrapper .row {
    margin-top: 8px;
    margin-bottom: 8px;
}

.form-check-input {
    cursor: pointer;
}
.beachtab-buttons .btn {
    margin: initial;
}

.beachtab-buttons .btn-primary {
    margin-left: auto;
}

.beachtab-buttons .btn-link {
    padding: 0;
    color: #474344;
    outline: 0 !important;
    box-shadow: inherit !important;
}

.beachtab-buttons {
    align-items: center;
}
.btn-secondary {
    background: #7a7879;
    border-color: #7a7879;
}

.btn-secondary:hover {
    background: #474344;
    border-color: #474344;
}
.beach-statistic label.form-label {
    width: 100%;
    min-height: 20px !important;
}

label.form-numbers {
    display: flex;
    min-height: 48px;
    align-items: center;
    font-weight: 700;
    margin-bottom: 15px;
}

.beach-statistic .form-control {
    margin-bottom: 15px;
}

.beach-statistic {
    margin-top: 25px;
}
.user-account .dropdown-toggle:hover {
    background: none;
}


.incident-report-grid .equipment-list-wrapper {
    border-bottom: solid 1px #d9d9d9;
}

.incident-report-grid .equipment-list-wrapper .row {
    margin-top: 0;
    margin-bottom: 0;
}

.incident-report-grid h6 {
    margin: 0;
    font-size: 14px;
}
.incident-report-grid 
 .form-control {
    border: solid 1px rgb(71 67 68 / 43%);
    min-height: 40px;
}
.del-btn {
    padding: 0px;
    border: 0;
    background: none;
    margin: 0;
    line-height: 0;
}
.del-btn span {
    color: #474344;
}

.footertop-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0px auto;
    background: #fff;
    padding: 20px;
    box-shadow: rgb(0 0 0 / 14%) 0px 0px 20px;
}

.tab-pane {
    position: relative;
    outline: 0px;
    border: 0px;
}


footer.footer-wrapper {
    margin-bottom: 6rem;
}

.beachtab-buttons .d-flex {
    align-items: center;
    padding: 0rem 0rem;
    width: 850px;
    justify-content: center;
    margin: 0px auto;
}



.backtotop {
    display: inline-block;
    background-color: #ffffff;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 102px;
    right: 30px;
    transition: background-color .3s, 
      opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: initial;
    color: #474344;
    border-radius: 50%;
    border: solid 1px #474344;
  }

  .backtotop:hover {
    cursor: pointer;
    background-color: #474344;
  }
  .backtotop:active {
    background-color: #555;
  }
  .backtotop.show {
    opacity: 1;
    visibility: visible;
  }
.backtotop span {
    font-size: 30px;
}

.backtotop:hover span {
    color: #fff;
}



/* Forgot-password */
.login-form h5 {
    color: rgb(71 67 68);
}

.forgot-password .login-form-inner {
    padding: 0rem 4rem;
}
.otp-screen  .form-control {
    padding: 6px;
    font-size: 22px;
    min-height: 50px;
}


/* New Incident Report */
.new-incident-report .incident-list {
    margin: 10px 0px;
}

.new-label label.label {
    font-size: 16px;
    color: rgb(71 67 68);
    font-weight: 500;
    margin: 0px;
    padding: 0px;
}
.new-label {
    align-items: center;
    display: flex;
}

.two-coloumn .new-label {
    display: flex;
    flex-direction: column;
    align-items: self-start;
}
.video-upload button.video-upload-btn {
    padding: 11px 16px;
}

figure.privacy-notice {
    margin: 30px 0px 0px;
    border: 1px solid #ced4da;
    padding: 20px 20px;
    background: #fbfbfb;
}

figure.privacy-notice blockquote.blockquote {
    margin: 0;
}

.daynote-wrapper {
    width: 76%;
    margin: 0px auto;
    margin-bottom: 6px;
}


/* Media-query */
@media only screen and (max-width: 1024px) {
    .daynote-wrapper {
        width: 100%;
        margin: 0px auto;
        margin-bottom: 6px;
    }
    .login-body-inner { width: 100%; }
    .reports-page .login-body-inner {padding: 3rem 2rem;margin-top: 0rem;}
    .radio-group .form-check { margin-right: 0.5rem; min-width: 90px;}
    .login-body { height: auto; }
    .beachtab-buttons .d-flex {width: 100%;}
}
@media only screen and (max-width: 767px) {
    .login-logo img {width: auto;max-width: 100%;}
    .login-body-inner { padding: 3rem 2rem; }
    .login-form-inner .forgot-password { margin-bottom: 2rem !important; }
    .login-body {padding: 1rem 5px 1rem;height: 100%;}
    .login-form h2 {font-size: 1.6rem;}
    .datepicker-dropdown {min-width: 260px;}


    .block-content {min-width: 64%;}
    .block-heading {min-width: 36%;}
    .radio-heading h3 { font-size: 1rem;}
    .block-heading h6, .radio-heading h6 { font-size: 12px;}
    .radio-heading {min-width: 34%;}
    .radio-group .form-check { min-width: 29%; margin-right: 0;}
    .form-check-input {width: 0.8rem;height: 0.8rem;}
    .form-check .form-check-input { margin-left: -18px; position: relative; top: 2px;}
    .radio-group .form-check label.form-check-label { font-size: 14px;}
    .block-lines span { font-size: 12px;}
    .radio-group-button {  min-width: 66%;}
    .beach-status .radio-group-button { text-align: right;}
    .swell-size-wrpr span.ps-4 {padding: 0px !important;margin: 6px 0px 0px;}
    .swell-size-wrpr .block-content .block-lines { display: flex; flex-direction: column;}
    .swell-size-wrpr .block-content { min-width: 64%;}    
    .swell-size-wrpr .block-heading {margin-bottom: auto;padding-top: 18px;}
    .reports-nav-tabs { display: flex; flex-direction: row; }
    .reports-nav-tabs .nav-link {font-size: 13px;padding: 10px 8px;margin-right: 3px;}
    .reports-page .login-body-inner { padding: 2rem 1.5rem;}
    p { font-size: 14px;}
    .tides-block-wrapper .block-heading {min-width: 20%;}
    .number-input button { line-height: 0px; }
    .row-group-wrapper .radio-heading.display-flex button.btn.btn-secondary {padding: 1px 10px;font-size: 14px;min-height: 36px;}

    .flag-placement { padding-right: calc(var(--bs-gutter-x) * .5) !important; }
    .information-sign {padding-left: calc(var(--bs-gutter-x) * .5) !important; margin-top: 30px; }
    .row-group-wrapper .radio-heading {display: flex; flex-direction: column; align-items: flex-start;}
    .row-group-wrapper .radio-heading.display-flex { display: flex; flex-direction: row; align-items: center;}
    .Beach-tabs-wrapper .row-group-wrapper label.form-label {  padding-right: 0; }
    .row-group-wrapper .radio-heading i { margin-top: 6px;}
    .equipment-list h3 { font-size: 0.8rem; }

    .modal-body .areyouwant-box { padding: 10px;}    
    .modal-footer .btn { font-size: 14px; min-width: 44%; }
    .modal-footer { padding: 0;}
    .modal-body {  padding-bottom: 2rem; }
    .modal-body .areyouwant-box p { font-size: 16px;}
    .modal-body .areyouwant-box span { font-size: 6rem;}
    .login-form .btn { line-height: 30px;}
    .beachtab-buttons { display: flex; flex-direction: column;}
    .beachtab-buttons .btn-link {margin: 0px 0px 10px; }
    .form-label {  font-size: 14px;}
    .login-body { height: auto; }
    .form-control { padding: 10px 8px;}
    .beach-statistic .col-3 { width: 27.5%;}
    .row-group-wrapper .radio-heading.display-flex .btn { padding: 5px 10px; font-size: 14px;}
    .user-account .btn-secondary {background: none !important;}

    .beachtab-buttons .d-flex {width: 100%;}
    .beachtab-buttons .container { padding: 0;}
    .beachtab-buttons .btn-primary { min-width: 180px;}
    .backtotop { width: 40px;  height: 40px;  right: 16px;  bottom: 152px;}

    .forgot-password .login-form-inner {
        padding: 0rem 4rem;
    }
    .new-incident-report .form-check .form-check-input {
        margin-left: 0;
    }
    
    .new-incident-report .form-check {
        padding-left: 0px;
    }
    
    .new-incident-report .form-check label.form-check-label {
        padding-left: 5px;
    }
    
}

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

    .reports-page .login-body-inner {padding: 1rem 1rem;}
    .block-lines { width: 100%;}
    .block-flex { width: 100%; }
    .block-flex-wrapper { width: 100%;}
    .beach-width-wrapper .form-control {width: 140px;}
    .reports-nav-tabs .nav-link { padding: 10px 6px;font-size: 13px;}
    .radio-heading h3 {   font-size: 0.8rem;}

    .reports-nav-tabs .nav-link {padding: 10px 7px;font-size: 12px;}

}

.date-error {
    color: red;
    font-size: 12px;
    height: 35px;
    top: 212px;
    color: red;
}