/*html, body { height: 100%; }*/
body {
    margin: 0;
    font: 400 14px/20px Roboto,Helvetica Neue,sans-serif;
    font-family: Roboto, "Helvetica Neue", sans-serif !important;
    letter-spacing: normal;
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.gm-control-active > img {
    box-sizing: content-box;
    display: none;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%)
}

    .gm-control-active > img:nth-child(1) {
        display: block
    }

.gm-control-active:hover > img:nth-child(1) {
    display: none
}

.gm-control-active:active > img:nth-child(1) {
    display: none
}

.gm-control-active:disabled > img:nth-child(1) {
    display: none
}

.gm-control-active:hover > img:nth-child(2) {
    display: block
}

.gm-control-active:active > img:nth-child(3) {
    display: block
}

.gm-control-active:disabled > img:nth-child(4) {
    display: block
}
/* You can add global styles to this file, and also import other style files */
.gm-ui-hover-effect {
    opacity: .6
}

    .gm-ui-hover-effect:hover {
        opacity: 1
    }

    .gm-ui-hover-effect > span {
        background-color: #000
    }

@media (forced-colors:active),(prefers-contrast:more) {
    .gm-ui-hover-effect > span {
        background-color: ButtonText
    }
}

.gm-style .gm-style-cc a, .gm-style .gm-style-cc button, .gm-style .gm-style-cc span, .gm-style .gm-style-mtc div {
    font-size: 10px;
    box-sizing: border-box
}

.gm-style .gm-style-cc a, .gm-style .gm-style-cc button, .gm-style .gm-style-cc span {
    outline-offset: 3px
}

@media print {
    .gm-style .gmnoprint, .gmnoprint {
        display: none
    }
}

@media screen {
    .gm-style .gmnoscreen, .gmnoscreen {
        display: none
    }
}

.dismissButton {
    background-color: #fff;
    border: 1px solid #dadce0;
    color: #1a73e8;
    border-radius: 4px;
    font-size: 14px;
    height: 36px;
    cursor: pointer;
    padding: 0 24px
}

    .dismissButton:hover {
        background-color: rgba(66,133,244,.04);
        border: 1px solid #d2e3fc
    }

    .dismissButton:focus {
        background-color: rgba(66,133,244,.12);
        border: 1px solid #d2e3fc;
        outline: 0
    }

        .dismissButton:focus:not(:focus-visible) {
            background-color: #fff;
            border: 1px solid #dadce0;
            outline: none
        }

    .dismissButton:focus-visible {
        background-color: rgba(66,133,244,.12);
        border: 1px solid #d2e3fc;
        outline: 0
    }

    .dismissButton:hover:focus {
        background-color: rgba(66,133,244,.16);
        border: 1px solid #d2e2fd
    }

        .dismissButton:hover:focus:not(:focus-visible) {
            background-color: rgba(66,133,244,.04);
            border: 1px solid #d2e3fc
        }

    .dismissButton:hover:focus-visible {
        background-color: rgba(66,133,244,.16);
        border: 1px solid #d2e2fd
    }

    .dismissButton:active {
        background-color: rgba(66,133,244,.16);
        border: 1px solid #d2e2fd;
        box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)
    }

    .dismissButton:disabled {
        background-color: #fff;
        border: 1px solid #f1f3f4;
        color: #3c4043
    }

.gm-style-moc {
    background-color: rgba(0,0,0,.45);
    pointer-events: none;
    text-align: center;
    transition: opacity ease-in-out
}

.gm-style-mot {
    color: white;
    font-size: 22px;
    margin: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%)
}

.gm-style img {
    max-width: none;
}

.gm-style {
    font: 400 11px;
    text-decoration: none;
}



/* Filtering table demo */
ngbd-table-filtering span.ngb-highlight {
    background-color: yellow;
}

/* Complete table demo */
ngbd-table-complete span.ngb-highlight {
    background-color: yellow;
}

ngb-carousel .picsum-img-wrapper {
    position: relative;
    height: 0;
    padding-top: 55%; /* Keep ratio for 900x500 images */
}

    ngb-carousel .picsum-img-wrapper > img {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }


/*For iPhone*/
@media only screen and (min-device-width: 480px) {
}
/*For tablets*/
@media only screen and (min-device-width: 768px) {
}



section, .section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

section, #home {
    padding-top: 0rem !important;
}

.mat-dialog-container {
    /*border-radius: 54px !important;*/
}

.mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {
    background-color: #d55367 !important;
}

.mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: rgb(253 237 195) !important;
}

.error-message {
    color: darkred !important;
}

.mat-body, .mat-body-1, .mat-typography .mat-body, .mat-typography .mat-body-1, .mat-typography {
    font-family: Roboto, "Helvetica Neue", sans-serif !important;
}

.ng-image-fullscreen-view .lightbox-wrapper .close {
    z-index: 1000 !important;
    position: absolute !important;
    top: 69px !important;
}


.cdk-overlay-dark-backdrop {
    background: rgb(0 0 0 / 45%);
    backdrop-filter: blur(6px);
}

.header-section {
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 100vh !important;
}
img.thumb {
    width: 300px;
    height: 200px;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}