* {
    box-sizing: border-box;
}


/* #region Container and Body */

body {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif !important;
    height: 100%;
}

.container {
    max-width: 100% !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.body-content {
    padding-left: 5% !important;
    padding-right: 5% !important;
    height: 100%;
    width: 100%;
}

.main-content {
    padding-bottom: 3% !important;
    padding-top: 3% !important;
    background-color: #ffffff !important;
}

/* #endregion */


/* #region general Widths, Paddings, Margins, Align, Display */

.w-5 {
    width: 5%;
}

.w-10 {
    width: 10%;
}

.w-15 {
    width: 15%;
}

.w-30 {
    width: 30%;
}

.w-35 {
    width: 35%;
}

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

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

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

.flex-center {
    justify-content: center;
}

.layout-margin-bottom {
    margin-bottom: 2%;
}

.margim-bt-1 {
    margin-bottom: 1%;
}

.margim-bt-3 {
    margin-bottom: 3%;
}

.pl-2 {
    padding-left: 2%;
}

.display-none {
    display: none;
}

/* #endregion */


/* #region general Labels */

label {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(0.8rem, 1.5vw, 1.2rem);
    font-weight: bold;
    color: black;
    margin-bottom: 2px !important;
}

a {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(0.8rem, 1.5vw, 1.2rem);
    font-weight: bold;
}

p {
    font-size: clamp(1rem, 1.7vw, 1rem);
}

.list-error {
    list-style-type: disc;
    padding-left: 20px;
}

.label-title {
    color: #06a6c1;
    font-size: clamp(1rem, 1.7vw, 1.5rem);
}

.label-help {
    font-size: clamp(1rem, 1.7vw, 1rem);
    font-weight: normal;
}

.label-bold-title {
    font-weight: bold;
}

/* #endregion */


/* #region general Input */

input.checkbox-larger {
    transform: scale(2);
}

input[type="text"] {
    border: 1px solid #dadada !important;
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    border-radius: 10px !important;
    color: black !important;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 1.6em;
}

    input[type="text"][readonly] {
        background-color: transparent !important;
    }

.select2-container .select2-selection--single {
    height: 38px !important;
    font-size: 1em !important;
}

.select2-container--default .select2-selection--single {
    border-radius: 10px !important;
    border: 1px solid #dadada !important;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 35px !important;
        width: 30px !important;
    }

.select2-container {
    font-size: 1.6em !important;
}

/* #endregion */


/* #region general Buttons */

.button {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border-radius: 10px !important;
    border: none;
}

.button-submit {
    background-color: #06a6c1;
    color: white;
    width: 100%;
}

.button,
.button-submit,
.button-result {
    min-width: 120px;
    white-space: nowrap;
}

.button-x {
    background-image: url("../Images/ButtonX.png");
    background-size: contain !important;
}

.button-delete {
    width: 4em;
    height: 3em;
    min-width: 2em !important;
}

/* #endregion */


/* #region Event Inputs */

.layout-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 5em;
}

.layout-event-item {
    display: flex;
    align-items: center;
    gap: 0 3em;
}

    .layout-event-item label {
        white-space: nowrap;
    }

    .layout-event-item .label-wrapper label {
        align-items: center;
        white-space: normal;
        word-break: break-word;
    }

span.span-mandatory {
    color: red;
    font-size: clamp(0.8rem, 1.7vw, 1.2rem);
    font-weight: normal;
    line-height: 0;
}

    .layout-item.layout-item-gap-0 input {
        min-width: 40%;
        flex: 1 1 auto;
    }

.div-eventname,
.div-eventdate {
    flex: 1 1 30%;
}

.div-thresold {
    flex: 1 1 40%;
}

.div-label-thresold {
    flex: 1 1 65%;
}

.div-textbox-thresold {
    flex: 1 1 35%;
    gap: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

    .div-textbox-thresold input {
        min-width: 40%;
        flex: 1 1 auto;
    }

.button-tooltip {
    background-image: url("../Images/TooltipIcon.png");
    width: 4em;
    height: 3em;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-size: contain;
    border: none;
    padding-left: 4em;
    flex-shrink: 0;
}

#userEventsDiv {
    width: 50%;
}

.select-user-events {
    width: 90% !important;
}

/* #endregion */


/* #region Attendees-Cities Inputs */

#citiesContainer {
    width: 100%;
    overflow-x: hidden;
}

.layout-cities {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 2em;
}

.layout-cities-mb {
    margin-bottom: 1em;
}

.div-select-city {
    flex: 1 1 85%;
}

.div-textbox-numpersons {
    width: 10%;
}

.div-button-reduce {
    width: 5%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.layout-add-reduce,
.layout-preferred {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 5em;
    width: 100%;
}

.layout-add-reduce-item,
.layout-preferred-item {
    display: flex;
    align-items: center;
    gap: 0 3em;
}

.button-attendee {
    width: 100%;
    height: 7em;
    font-size: clamp(0.5rem, 2vw, 0.6rem) !important;
}

.button-add-attendee {
    background-image: url("../Images/ButtonAddAttendee.png");
}

.button-delete-attendee {
    background-image: url("../Images/ButtonDeleteAttendee.png");
}

/* #endregion */


/* #region Submit */

.layout-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1%;
    width: 100%;
}

.button-calculate {
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    height: 2.6em;
}

.label-loader {
    color: black !important;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: clamp(0.8rem, 1.7vw, 1rem);
}

.div-loader {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #06a6c1;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

/* #endregion */


/* #region Result option */

.layout-option-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}

.div-back-result,
.div-class-result,
.div-buttons-result,
.div-map-result {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

    .div-back-result > *,
    .div-buttons-result > *,
    .div-map-result > * {
        flex: 1;
    }

    .div-map-result > * {
        min-width: 0;
    }

    .div-class-result {
        flex-grow: 1;
    }

.button-back {
    background-image: url("../Images/ButtonBack.png");
    width: 100%;
    height: 3.7em;
    background-size: contain !important;
    background-position: left !important;
    flex: 0 0 auto;
}

.button-result {
    font-size: clamp(1rem, 1.4vw, 1.6rem);
    height: 2.3em;
}

.button-result-active {
    background-color: #38a79d !important;
}

#mapContainerDiv {
    display: flex;
    align-items: center;
    gap: 2em;
    white-space: nowrap;
    min-width: fit-content;
    flex: 1 1 60%;
    justify-content: flex-end;
}

/* #endregion */


/* #region Show Results */

.layout-results {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .layout-results label {
        width: 100%;
    }

.layout-results-item {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 2em;
    gap: 0 1em;
    padding-left: 1em;
    padding-right: 1em;
}

.div-result-title {
    width: 30%;
}

.div-result-co2 {
    width: 10%;
    justify-content: flex-end;
}

.line-result-title {
    border-bottom: solid 1px lightgray;
    height: 5em;
}

.line-result-color {
    background-color: #eef4f4;
    color: #ffffff;
}

.label-result {
    font-size: clamp(0.8rem, 1.5vw, 1.0rem);
}

.label-result-detail {
    color: #444;
    font-size: clamp(0.5rem, 1.5vw, 0.65rem);
    font-weight: 400;
    background-color: transparent;
    border: none;
}

#resultComputerDiv {
    display: block;
}

#resultMobileDiv {
    display: none;
}

.color1 {
    color: #06c10a;
}

.color2 {
    color: #098a52;
}

.color3 {
    color: #098b84;
}

.color4 {
    color: #2897a4;
}

.color5 {
    color: #06a6c1;
}

.color6 {
    color: #ff8808;
}

.layout-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.layout-detail-item {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 2em;
    gap: 0 1em;
    padding-left: 1em;
    padding-right: 1em;
}

.layout-detail-color {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border: none;
    background-color: transparent !important;
}

    .layout-detail-color:nth-child(odd) .layout-detail-item:not(.layout-no-color) {
        background-color: #eef4f4;
    }

    .layout-detail-color:nth-child(even) .layout-detail-item:not(.layout-no-color) {
        background-color: #f8f9fa;
    }

    .layout-detail-item.layout-no-color {
        background-color: #ffffff !important;
    }

.div-detail-city {
    width: 85%;
}

.div-detail-flag {
    height: 5em;
}

.img-flag {
    float: left;
    min-height: 4em !important;
    min-width: 6em !important;
    max-height: 4em !important;
    max-width: 6em !important;
    height: 4em !important;
    width: 6em !important;
}

.button-result-detail {
    margin-left: 1em;
    width: 8%;
}

.button-result-detail-ok {
    vertical-align: unset !important;
}

.button-arrow-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    height: 3em !important;
    width: 3em !important;
}

    .button-arrow-image.ArrowRight {
        background-image: url("../Images/ArrowRight.png");
    }

    .button-arrow-image.ArrowDown {
        background-image: url("../Images/ArrowDown.png");
    }


/* #endregion */


/* #region Map */
.map {
    max-width: 100vw;
    height: 75vh;
}

.imageMapLegend {
    padding-right: 1%;
}

/* #endregion */


/* #region Modals */

.modal-header {
    border-bottom: none !important;
}

.modal-body {
    padding-bottom: 5%;
}

    .layout-modal .child1 {
        flex: 1 auto;
    }

    .layout-modal .child2 {
        flex: 3 auto;
    }

.layout-modal-item {
    display: flex;
    align-items: center;
    gap: 0 3em;
}

.layout-modal-title {
    justify-content: space-between;
    gap: 0 3em;
}

    .layout-modal-title:nth-child(2) {
        justify-content: flex-end;
    }

.label-validation {
    color: red;
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    font-weight: normal;
}

.layout-modal-item li {
    list-style-type: none;
    padding-left: 0;
}

.link-user {
    font-weight: normal !important;
    font-size: clamp(0.8rem, 1.5vw, 1rem);
}

.button-close {
    width: 2em;
    height: 2em;
    border: none;
    background-color: transparent;
}

.div-confirm-message {
    text-align: center;
    margin-bottom: 0.8em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 2.2em;
    color: black;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
}

.modal-dialog-confirm {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.modal-content-confirm {
    max-width: 70% !important;
    width: 70% !important;
    height: auto !important;
    display: flex;
    align-items: center;
    left: calc(50% - 35%);
}

.button-confirm {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    border-radius: 10px !important;
    border: none;
    font-size: 2.6em;
    background-position: center;
    width: 100%;
    height: 2.7em;
}

.button-yes {
    color: white;
    background-color: #06a6c1;
}

.button-no {
    color: #38a79d;
    background-color: #e6f6f9;
}

/* #endregion */


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* #region ipad */

@media (max-width:1024px) {

    /* #region general Widths, Paddings, Margins, Align, Display */

    .layout-margin-bottom {
        margin-bottom: 5%;
    }

    /* #endregion */

   
    /* #region Event Inputs */

    .layout-event {
        gap: 2em;
        flex-direction: column;
        align-items: stretch;
    }

    .layout-event-item {
        width: 100% !important;
        justify-content: space-between;
    }

        .layout-event-item input[type="text"] {
            width: 100%;
            max-width: 100%;
        }

    .button-tooltip {
        width: 4em;
        height: 3em;
    }

    #userEventsDiv {
        width: 100% !important;
    }

    /* #endregion */


    /* #region Attendees-Cities Inputs */

    .layout-cities {
        gap: 0 1em;
    }

    .div-select-city {
        flex: 1 1 80%;
    }

    .div-textbox-numpersons {
        flex: 1 1 15%;
    }

    .div-button-reduce {
        flex: 1 1 5%;
    }

    .button-attendee {
        height: 5em;
    }

    .layout-add-reduce,
    .layout-preferred {
        gap: 2em;
        flex-direction: column;
        align-items: stretch;
    }

    .layout-add-reduce-item,
    .layout-preferred-item {
        width: 100% !important;
        justify-content: space-between;
        gap: 0 2em;
    }

    .layout-checkbox {
        justify-content: unset !important;
    }

    /* #endregion */


    /* #region Result option */

    .div-class-result {
        justify-content: unset;
    }

    #mapContainerDiv {
        justify-content: flex-end;
    }

    /* #endregion */


    /* #region Show Results */

    .layout-results-item {
        padding-left: 0;
        padding-right: 0;
    }

        .layout-results-item .label-wrapper label {
            display: flex;
            align-items: center;
        }

    .div-result-title {
        width: 75%;
    }

    .div-result-co2 {
        width: 15%;
    }

    .show-column {
        display: none;
    }

    #resultComputerDiv {
        display: none;
    }

    #resultMobileDiv {
        display: block;
    }

    .layout-detail-item {
        padding-left: 0;
        padding-right: 0;
    }

    .div-detail-city {
        width: 75%;
    }

    .img-flag {
        min-height: 3.2em !important;
        min-width: 4.8em !important;
        max-height: 3.2em !important;
        max-width: 4.8em !important;
        height: 3.2em !important;
        width: 4.8em !important;
    }

    /* #endregion */


    /* #region Modals */

    .layout-modal {
        flex-direction: column;
        align-items: stretch;
    }

    .layout-modal-item {
        width: 100% !important;
        justify-content: space-between;
    }

    /* #endregion */
  
}

/* #endregion */



/* #region mobile and small ipad */

@media (max-width:768px) {


    /* #region Event Inputs */

    .layout-event-item .label-wrapper label {
        white-space: unset;
    }

    /* #endregion */


    /* #region Attendees-Cities Inputs */

    .div-select-city {
        flex: 1 1 75%;
    }

    .div-textbox-numpersons {
        flex: 1 1 20%;
    }

    .div-button-reduce {
        flex: 1 1 5%;
    }

    .button-attendee {
        height: 4em;
    }

    /* #endregion */


    /* #region Show Results */

    .layout-detail-item .label-wrapper label {
        white-space: unset;
        width: auto !important;
    }

    /* #endregion */

    
    /* #region map */

    .map {
        height: 40vh;
    }

    /* #endregion */
    
}

/* #endregion */