/*
    Project:    Darlington.gov.uk 2022 Umbraco 10
    Version:    1.0
    Date:       13/07/2022
    Author:     Chris Smith (DBC)
    
    Purpose:    This CSS file houses all the utility classes that bootstrap doesn't cover.
*/


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------Mobile View----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*---------------Colour Utilities------------*/

.alertColour-000000{
    background-color: #000;
}

.alertColour-b30000{
    background-color: #b30000;
}

.alertColour-066100 {
    background-color: #066100;
}

.alertColour-e4de1b {
    background-color: #e4de1b;
}

.alertColour-007297 {
    background-color: #007297;
}

.alertColour-eeeeee {
    background-color: #eee;
}

.alertCard.alertColour-000000,
.alertCard.alertColour-066100,
.alertCard.alertColour-007297,
.alertCard.alertColour-b30000,
.alertCard.alertColour-000000 h2,
.alertCard.alertColour-066100 h2,
.alertCard.alertColour-007297 h2,
.alertCard.alertColour-b30000 h2,
.alertCard.alertColour-000000 .h2,
.alertCard.alertColour-066100 .h2,
.alertCard.alertColour-007297 .h2,
.alertCard.alertColour-b30000 .h2 {
    color: #fff;
}

.bg-000000{
    background-color: #000;
}

.bg-ffffff{
    background-color: #fff;
}

.text-000000{
    color: #000;
}

.text-ffffff{
    color: #fff;
}

/*--------------------------------------------------------*/
/*-------------------------Backgrounds--------------------*/
/*--------------------------------------------------------*/
.bg-primary {
    background-color: #007297 !important;
}

.bg-light {
    background-color: #e1dcdc !important;
}

.bg-dark {
    background-color: #2f2e2e !important;
}

.bg-success {
    background-color: #198754 !important;
}

.bg-danger {
    background-color: #D73B33 !important;
}

.bg-warning {
    background-color: #f2ab31 !important;
}

.bg-secondary {
    background-color: #e2e3e5 !important;
}

.text-bg-primary {
    color: #fff !important;
    background-color: #007297 !important;
}

.bg-light-grey {
    background-color: #ebeaea;
}
    /*--------------------------------------------------------*/
    /*------------------------Borders-------------------------*/
    /*--------------------------------------------------------*/

.border-primary{
    border-color: #007297 !important;
    --bs-border-opacity: 1;
}

.border-light {
    border-color: #f5f5f5 !important;
}

.border-dark {
    border-color: #2f2e2e !important;
}

.border-success {
    border-color: #198754 !important;
    --bs-border-opacity: 1;
}

.border-danger {
    border-color: #D5332A !important;
}

.border-warning {
    border-color: #f2ab31 !important;
}

.border-secondary {
    border-color: #e2e3e5 !important;
}

.border-black {
    border-color: #000 !important;
}

.border-white {
    border-color: #fff !important;
}

/*--------------------------------------------------------*/
/*------------------------Images--------------------------*/
/*--------------------------------------------------------*/

.img-fit-cover{
    object-fit:cover;
}

.img-fit-contain {
    object-fit: contain;
}

.img-fit-fill {
    object-fit: fill;
}

.img-fit-none {
    object-fit: none;
}

.img-fit-scale-down {
    object-fit: scale-down;
}

/*--------------Font Awesome----------------*/
.fa-1-5x {
    font-size: 1.5rem;
}

.fa-1-75x{
    font-size: 1.75rem;
}

.fa-333{
    color: #333;
}

.fa-xs-2x{
    font-size: 2rem;
}

.fa-xs-3x {
    font-size: 3rem;
}

.fa-xs-4x {
    font-size: 4rem;
}

/*-------Opacity controls-----------*/

.img-opacity-100 {
    opacity: 1;
}
.img-opacity-90{
    opacity: .9;
}
.img-opacity-80 {
    opacity: .8;
}
.img-opacity-70 {
    opacity: .7;
}
.img-opacity-60 {
    opacity: .6;
}
.img-opacity-50 {
    opacity: .5;
}

/*--------------Umbraco Overrides-----------*/
.umb-grid img {
    height: auto;
    max-width: 100%;
}



@media (max-width: 575px) {
    .btn-block-xs {
        display: block;
        width: 100%;
        margin: 5px 0;
    }

    .text-center-mobile {
        text-align: center !important;
    }

}

/*--------------Umbraco Forms-----------*/

.umbraco-forms-hidden {
    visibility: hidden;
}

.field-validation-error {
    background-color: #cd0013;
    color: #fff;
    margin-bottom: 1rem;
    padding: .375rem;
}

.umbraco-forms-field.mandatory > label:after {
    content: "*";
    color: #cd0013;
}

.umbraco-forms-field.dataconsent .form-check label{
    font-size: 1rem;
    width: 95%;
}

.btn-success.primary{
    font-size: 1.25rem;
    padding-inline: 1.875rem;
}




/*---------------Layout Utilities--------------*/
/*Line up radio buttons and labels on small devices*/
/*.lineUpRadios label {
    display: block;
    margin-left: 30px;
}

.lineUpRadios input{
    float: left;
}

.mb-35{
    margin-bottom: 35px;
}*/


/*-----------------Typography--------------------*/

.text-bold{
    font-weight: 600;
}

.pointer{
    cursor: pointer;
}

.wordWrap {
    white-space: normal;
}
/*-----------------Validation Alerts-------------*/
.field-validation-valid {
    display: none;
}

.field-validation-error{
    display: block;
}


/*-----------------Sizing and positioning-------------*/

.full-width-xs{
    width: 100%;
}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------Large Mobile View (COL-SM)-------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 576px) {
    /*--------------Font Awesome (COL-SM)----------------*/

    .fa-sm-2x {
        font-size: 2rem;
    }

    .fa-sm-3x {
        font-size: 3rem;
    }

    .fa-sm-4x {
        font-size: 4rem;
    }


}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .btn-block-sm{
        display: block;
        width: 100%;
    }
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------Small Tablet View (COL-MD)-------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) {

    .fa-solid,
    .fa-brands{
        font-size: 1.5rem;
    }

    /*--------------Font Awesome (COL-MD)----------------*/

    .fa-md-2x {
        font-size: 2rem;
    }

    .fa-md-3x {
        font-size: 3rem;
    }

    .fa-md-4x {
        font-size: 4rem;
    }


    /*-----Buttons-----*/


    /*-----------------Sizing and positioning (col-md)-------------*/

    .full-width-xs {
        width: initial;
    }



}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .btn-block-md {
        display: block;
        width: 100%;
    }
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------- Tablet View (COL-LG)------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 992px) {

    /*--------------Font Awesome (COL-LG)----------------*/

    .fa-lg-2x {
        font-size: 2rem;
    }

    .fa-lg-3x {
        font-size: 3rem;
    }

    .fa-lg-4x {
        font-size: 4rem;
    }

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .btn-block-lg {
        display: block;
        width: 100%;
    }
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------- Small Desktop View (COL-XL)-----------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1200px) {
    /*--------------Font Awesome (COL-XL)----------------*/

    .fa-xl-2x {
        font-size: 2rem;
    }

    .fa-xl-3x {
        font-size: 3rem;
    }

    .fa-xl-4x {
        font-size: 4rem;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .btn-block-xl {
        display: block;
        width: 100%;
    }
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------- Large Desktop View (COL-XXL)----------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1400px) {

}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    .btn-block-xxl {
        display: block;
        width: 100%;
    }
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------- Extra Large Desktop View (COL-XXXL)----------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1600px) {
}


/*-----------------------Upto XXXL------------------*/
@media only screen and (max-width: 1599px) {
    .btn-block-to-xxxl {
        display: block;
        width: 100%;
    }
}


/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------- HD (COL-XXXXL)---------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1920px) {
}


/*-----------------------Upto XXXXL------------------*/
@media only screen and (max-width: 1919px) {
    .btn-block-to-xxxxl {
        display: block;
        width: 100%;
    }
}