.light_mask {
    background-color: rgba(var(--primary), 4%);
}

.service_available_wrapper h2 {
    margin-bottom: 2em;
    margin-top: 0px;
    font-weight: 400;
    font-size: .95em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgb(0 0 0 / 35%);
}
.service_section {
    margin-bottom: 2em;
}
.no-services-available .service_section .card {
    box-shadow: none;
    background: transparent;
}
.service_section .card {
    border: 1px solid transparent;
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 5%);
}
.card .os-site-service-card-title {
    color: rgba(var(--primary), 100%);
    font-weight: 400;
}
.card .os-site-service-card-description {
    flex: 1;
    color: var(--grey1);
    font-size: .9em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.3em;
    min-height: 56px;
}
.card-body .btn i.lni {
    padding-right: .5em;
}


@media all and (max-width: 768px) {
    .service_section {
        margin-bottom: 1em;
    }
}

/* ----------- CUSTOMIZING PANEL   ------------- */
.panel-border.panel-primary .panel-heading, .panel.panel-default .panel-heading, .panel-border.panel-secondary .panel-heading{
    background: transparent;
    border: 0px !important;
    padding: 1em 2em 1em;
}

.panel-border.panel-primary, .panel.panel-default, .panel.panel-secondary {
    box-shadow: 0 0px 28px 0 rgb(0 0 0 / 8%);
    border-radius: 12px !important;
}

.submission-details .entry-display-panel .panel-body {
    padding: 5px;
    background: #FFF;
    border-radius: 12px !important;
    box-shadow: 0 0px 28px 0 rgb(0 0 0 / 8%);
    margin-bottom: 30px;
}
.submission-details .entry-display-panel .tab-content {
    box-shadow: none;
}

/* ----------- END CUSTOMIZING PANEL   ------------- */


/* ----------- CUSTOMIZING MODAL & ALERTS   ------------- */

.modal .modal-dialog .modal-content {
    border-radius: 12px;
}

.sweet-alert {
    border-radius: 12px;
}
/* ----------- END CUSTOMIZING MODAL & ALERTS   ------------- */



/* ----------- CUSTOMIZING FORM PANEL   ------------- */

.os-form-styled-panel-container.elevated form.onestop-built-form {
    box-shadow: 0 0px 28px 0 rgb(0 0 0 / 8%);
    border-radius: 12px;
    overflow: hidden;
    background: #FFF;
}

.os-form-styled-panel-container form.onestop-built-form {
    padding: 1.5em 1em;
}

.os-form-styled-panel-container form.onestop-built-form {
    width: 100%;
}

.os-form-styled-panel-container h2.panel-title.widget-title {
    color: rgba(var(--primary), 100%);
    font-weight: 700;
    font-family: 'Source Sans Pro', sans-serif;
    line-height: 1em;
    font-size: 1.9em;
    text-transform: none;
    /* color: #6a6a6a; */
}

.os-form-styled-panel-container .alert.alert-success.alert-dismissable {
    background: transparent;
    padding: 0.5em 1.2em;
    border: 0px;
    color: #000;
    font-size: 1.2em;
    font-weight: 300;
}
.os-form-styled-panel-container .pull-right button.btn-autosave-status.btn.btn-sm.btn-default.btn-info {
    border: 0px !important;
    background: rgb(0 0 0 / 25%) !important;
}

.os-form-styled-panel-container .panel.panel-border.panel-primary {
    background: transparent;
    box-shadow: none;
}

.os-form-styled-panel-container .alert-dismissable .close, .os-form-styled-panel-container .alert-dismissible .close {
    right: 0px;
}

.os-form-styled-panel-container .modal-footer {
    display: block !important;
}
/* ----------- END CUSTOMIZING THE FORM PANEL   ------------- */


/* ----------- CUSTOMIZING THE ONESTOP FORM   ------------- */
form.onestop-built-form .built-field {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

form.onestop-built-form #immutable-block input, form.onestop-built-form #immutable-block select, form.onestop-built-form #immutable-block textarea {
    background: #f0f0f0;
}
/* ----------- END CUSTOMIZING THE ONESTOP FORM   ------------- */


/*----------- CUSTOMIZING ONESTOP FORM WIZARD FOR BIGGER SCREENS   -------------*/

form.onestop-built-form .wizard>.steps a, 
form.onestop-built-form .wizard>.steps a:hover, 
form.onestop-built-form .wizard>.steps a:active {
    border-radius: 100px !important;
    text-align: center;
}
form.onestop-built-form .wizard>.steps a.error, 
form.onestop-built-form .wizard>.steps .done a.error {
    background: transparent;
    color: #ef5350;
    border: 1px solid;
}
form.onestop-built-form .wizard>.steps a.error:hover, 
form.onestop-built-form .wizard>.steps .done a.error:hover {
    color: #FFF;
    background: #ef5350;
    border: 1px solid;
}
form.onestop-built-form .wizard>.steps .done a {
    background: transparent;
    color: #707070;
    border: 1px solid;
}
form.onestop-built-form .wizard>.steps .current a {
    background-color: transparent;
    color: rgba(var(--primary), 100%);
    border: 1px solid;
}
form.onestop-built-form .wizard>.steps a {
    border: 1px solid transparent; /* Preventing unselected steps on a line below from being displaced. */
}
form.onestop-built-form .wizard>.steps .current a:hover {
    background-color: rgba(var(--primary), 100%);
    color: #FFF;
}

/*----------- END CUSTOMIZING THE ONESTOP FORM WIZARD FOR BIGGER SCREENS   -------------*/


/* ----------- CUSTOMIZING FORM FIELDS   ------------- */

.section-break-widget {
    border-bottom: 2px solid rgba(var(--primary), 100%);
    margin-bottom: 20px;
}

.geo-multi-widget .geo-map{
    height: 300px;
    width: 100%;
    border: 2px solid rgba(var(--primary), 100%);
    border-radius: 12px;
}

.places-input-control {
    display: none;
}

iframe ~ * .places-input-control, iframe ~ .places-input-control {
    display: block;
    width: 50%;
    padding: 10px;
    border: 1px solid #CCC;
    border-radius: 4px;
    font-size: 16px;
}

/* ----------- END CUSTOMIZING FORM FIELDS   ------------- */

/* ----------- CUSTOMIZING COMPONENTS   ------------- */

.alert {
    border-radius: 12px;
}

.panel {
    border-radius: 12px;
}

.mini-stat {
    border-radius: 12px;
}
/* ------------------------------ */


/* ----------- BACKGROUNDS   ------------- */
/* .os-light-background-primary{
    text-shadow: 8px 8px 10px rgb(var(--primary), 10%);
    background-color: rgba(var(--primary), 20%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.25' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to right top, rgba(var(--primary), 20%), rgba(var(--primary), 40%), rgba(var(--primary), 60%), rgba(var(--primary), 80%), rgba(var(--primary), 10%));
} */

.os-light-background-primary{
    text-shadow: 8px 8px 10px rgb(var(--primary), 10%);
    background-color: rgba(var(--primary), 60%);
}

.os-dark-background-primary{
    text-shadow: 8px 8px 10px rgb(var(--primary), 100%);
    background-color: rgba(var(--primary), 80%);
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.25' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to right top, rgba(var(--primary), 20%), rgba(var(--primary), 40%), rgba(var(--primary), 60%), rgba(var(--primary), 80%), rgba(var(--primary), 100%)); */
}
/* ------------------------------ */

/* ----------- CUSTOMIZING ONESTOP FORM THAT RENDERS FORM CREATED BY FORM BUILDER   ------------- */
form.onestop-built-form {
    padding: 50px 50px 50px !important;
}

/* Picked from public-views.css so public and protected forms can match */
form.onestop-built-form .form-control, form.onestop-built-form .select2-container .select2-selection--single  {
    font-size: 1em;
    min-height: 45px;
    background: transparent;
    border: 1px solid #CCC;
    border-radius: 4px;
}

form.onestop-built-form input:focus, textarea:focus {
    border-color: rgb(var(--primary), 100%) !important;
}

form.onestop-built-form .select2-selection.select2-selection--single[aria-expanded="true"]{
    border-color: rgb(var(--primary), 100%) !important;
}

form.onestop-built-form .select2-selection__rendered{
    line-height: 45px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color: rgba(var(--primary), 90%);
}

/*bootstrap.css*/
/*slight change for labels on form builder forms*/

form.onestop-built-form > * .control-label {
    text-align: left;
}

/* ------------------------------ */


/* ----------- OTP Verification ------------- */

.otp-choice-description {
    color: #707070;
}

  /* ------------------------------ */


/* ----------- CSS Utilities   ------------- */

.min-h-100 {
    min-height: 100px;
}

.min-h-200 {
    min-height: 200px;
}

.min-h-350 {
    min-height: 350px;
}

.w-full {
    width: 100%;
}

.font-bold {
    font-weight: 700;
}

.centered-flexbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10px;
}

.text-center {
    text-align: center;
}

.p-t-1 {
    padding-top: 1em;
}

.p-t-2 {
    padding-top: 2em;
}

.p-b-1  {
    padding-bottom: 1em;
}

.p-b-2 {
    padding-bottom: 2em;
}

.m-t-1 {
    margin-top: 1em;
}

.m-t-2 {
    margin-top: 2em;
}

.m-b-1 {
    margin-bottom: 1em;
}

.m-b-2 {
    margin-bottom: 2em;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

.center-util{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.img-circle {
    border-radius: 50%
}

.radio-inputs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 350px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .radio-inputs > * {
    margin: 6px;
  }
  
  .radio-input:checked + .radio-tile {
    border-color: rgb(var(--primary));
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    color: rgb(var(--primary));
  }
  
  .radio-input:checked + .radio-tile:before {
    transform: scale(1);
    opacity: 1;
    background-color: rgb(var(--primary));
    border-color: rgb(var(--primary));
  }
  
  .radio-input:checked + .radio-tile .radio-icon svg {
    fill: rgb(var(--primary));
  }
  
  .radio-input:checked + .radio-tile .radio-label {
    color: rgb(var(--primary));
  }
  
  .radio-input:focus + .radio-tile {
    border-color: rgb(var(--primary));
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(var(--primary), 10%);
  }
  
  .radio-input:focus + .radio-tile:before {
    transform: scale(1);
    opacity: 1;
  }
  
  .radio-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    min-height: 80px;
    border-radius: 0.5rem;
    border: 1px solid #b5bfd9;
    background-color: #fff;
    /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); */
    transition: 0.15s ease;
    cursor: pointer;
    position: relative;
    word-wrap: anywhere;
  }
  
  .radio-tile:before {
    content: "";
    position: absolute;
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #b5bfd9;
    background-color: #fff;
    border-radius: 50%;
    top: 0.25rem;
    left: 0.25rem;
    opacity: 0;
    transform: scale(0);
    transition: 0.25s ease;
  }
  
  .radio-tile:hover {
    border-color: rgb(var(--primary));
  }
  
  .radio-tile:hover:before {
    transform: scale(1);
    opacity: 1;
  }
  
  .radio-icon svg {
    width: 2rem;
    height: 2rem;
    fill: #494949;
  }
  
  .radio-label {
    color: #707070;
    transition: 0.375s ease;
    text-align: center;
    font-size: 13px;
  }
  
  .radio-input {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

/* ------------------------------ */

.entry-display-panel{
    min-height: 300px;
}

/* ------------------------------ */


/* ----------- RESPONSIVENES   ------------- */


@media (max-width: 992px){

    /* ----------- FORM PANEL CONTAINER FOR SMALL SCREENS ----------- */
    .os-form-styled-panel-container .panel-heading .media-left{
        display: none;
    }

    .os-form-styled-panel-container h2.panel-title.widget-title{
        font-size: 1.5em;
    }

    .os-form-styled-panel-container .panel-heading .pull-right button{
        display: none;
    }

    .os-form-styled-panel-container > [class*='col-'], .os-form-styled-panel-container > .panel{
        padding-left: 0px;
        padding-right: 0px;
    }
    /* ----------- END FORM PANEL CONTAINER FOR SMALL SCREENS ----------- */


    /* ----------- BUILT FORM ON SMALLER SCREENS  ------------- */

    form.onestop-built-form .actions.pull-right, form.onestop-built-form .wizard > .actions > ul{
        float: none !important;
        display: flex;
        flex-direction: column;
        row-gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        margin: 15px;
    }

    form.onestop-built-form .actions.pull-right {
        margin-bottom: 30px;        
    }

    form.onestop-built-form .wizard > .actions > ul > li, form.onestop-built-form .pull-right button {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    form.onestop-built-form {
        padding: 5px !important;
    }

    .os-form-main.panel-body{
        padding: 5px;
    }

    .os-form-main .form-group {
        margin: 0 0 15px 0;
        overflow-x: scroll; /* Need to scroll horizontally for fields renderered as tables etc. e.g. dynamic matrix*/
        padding-bottom: 10px;
    }

    .os-form-main .form-group select { /* Preventing select 2 scrolling by ensuring it does not overflow when width is 100%*/
        width: 90%;
    }

    /* ------------------------------ */    

    /* ----------- CUSTOMIZING FORM WIZARD FOR SMALLER SCREENS   ------------- */
    form.onestop-built-form .wizard > .steps {
        margin-top: 30px;
        margin-bottom: 30px;
        border-bottom: 2px solid rgba(var(--primary), 100%);
    }

    form.onestop-built-form .wizard>.steps a, 
    form.onestop-built-form .wizard>.steps a:hover, 
    form.onestop-built-form .wizard>.steps a:active {
        border: 0px !important;
        border-radius: 5px !important;
        text-align: center;
    }
    form.onestop-built-form .wizard>.steps a.error, 
    form.onestop-built-form .wizard>.steps .done a.error {
        background: transparent;
        color: #ef5350;
    }
    form.onestop-built-form .wizard>.steps a.error:hover, 
    form.onestop-built-form .wizard>.steps .done a.error:hover {
        color: #FFF;
        background: #ef5350;
    }
    form.onestop-built-form .wizard>.steps .done a {
        background: transparent;
        color: #707070;
    }
    form.onestop-built-form .wizard>.steps .current a {
        background-color: rgba(var(--primary), 100%);
        color: #FFF;
        border-bottom: 1px solid;
    }
    form.onestop-built-form .wizard>.steps a {
        border-bottom: 1px solid transparent; /* Preventing unselected steps on a line below from being displaced. */
    }
    form.onestop-built-form .wizard>.steps .current a:hover {
        background-color: rgba(var(--primary), 100%);
        color: #FFF;
    }
    /* ------------ END CUSTOMIZING FORM WIZARD FOR SMALLER SCREENS   ------------- */
}

/* ------------------------------ */

/* TABLES */
.table-striped > tbody > tr:nth-of-type(2n + 1) {
    background-color: rgb(var(--primary), 0.1);
  }

.table-container {
    overflow: auto;
}

.reusable-datatable.table-container{
    padding-left: 10px;
}
.reusable-datatable input[id^='list_item_']{
    position: unset;
    margin-left: unset;
}

/*** Dynamic Matrix Form Field ****/

.os-dynamic-matrix {
    overflow: scroll;
}

.os-dynamic-matrix td {
    min-width: 150px;
}

/**********************************/