/*Requres bootstrap 4*/

@font-face {
    font-family: RobotoRegular;
    src: url(../fonts/Roboto-Regular.ttf);
}


:root {
    /*Verified Used*/
    --sim-btn-primary: #DC2626;
    --sim-btn-primary-hover: #B91C1C;
    --sim-btn-sec: #374151;
    --sim-btn-sec-hover: #4B5563;
    --background-colour-main: #111827;
    --input-background-color-main: #374151;
    --text-primary-colour: #F1F5F9;
    --text-secondary-colour: #A1A1AA;
    --sim-navbar-background-color: #111827;
    --sim-card-background-color: #1F2937;
    /* Colors: */
    --unnamed-color-e4e4e7: #E4E4E7;
    --unnamed-color-d4d4d8: #D4D4D8;
    --unnamed-color-e2e8f0: #E2E8F0;
    --unnamed-color-f8fafc: #F8FAFC;
    --unnamed-color-b91c1c: #B91C1C;
    --text-inactive: #4B5563;
    /* Font/text values */
    --unnamed-font-family-roboto: RobotoRegular;
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-normal: normal;
    --unnamed-font-weight-bold: bold;
    --unnamed-font-weight-medium: medium;
    --unnamed-font-size-12: 12px;
    --unnamed-font-size-16: 16px;
    --unnamed-font-size-24: 24px;
    --unnamed-font-size-48: 48px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-line-spacing-16: 16px;
    --unnamed-line-spacing-20: 20px;
    --unnamed-line-spacing-21: 21px;
    --unnamed-line-spacing-32: 32px;
    --unnamed-line-spacing-63: 63px;
    --unnamed-text-transform-uppercase: uppercase;
}

/* Character Styles */
.unnamed-character-style-1 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-12);
    line-height: var(--unnamed-line-spacing-16);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--text-secondary-colour);
}

h6,.unnamed-character-style-1-prim {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-12);
    line-height: var(--unnamed-line-spacing-16);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--text-primary-colour);
}

h5,.unnamed-character-style-2 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-12);
    line-height: var(--unnamed-line-spacing-20);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--text-secondary-colour);
    text-transform: var(--unnamed-text-transform-uppercase);
}


h4,.unnamed-character-style-3 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-21);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--text-secondary-colour);
}

h3,.unnamed-character-style-4 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-medium);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-21);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--text-primary);
}

h2,.unnamed-character-style-5 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-24);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--text-primary);
}


h1, .unnamed-character-style-6 {
    font-family: var(--unnamed-font-family-roboto);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-bold);
    font-size: var(--unnamed-font-size-48);
    line-height: var(--unnamed-line-spacing-63);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--text-primary-colour);
}

body {
    background-color: var(--background-colour-main);
    color: white;
    
}

.sim-navbar {
    height: 64px;
    width: 100%;
    background-color: var(--sim-navbar-background-color);
    display: flex;
    align-content: center;
    justify-content: space-between;
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
}

    .sim-navbar > span{
        display:flex;
        align-items:center;
    }

    .sim-navbar > span > span {
       margin-right:15px;

    }

.sim-modal-header {
    margin: 16px;
    margin-top: 24px;
}
.sim-modal-footer {
    margin: 16px;
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.sim-card-body {
    min-width: 300px;
    max-width: 940px;
    width: 100%;
    background-color: var( --sim-card-background-color);
    margin: 5px;
    padding: 25px;
    border-radius: 5px;
}

.modal-content {
    background-color: var(--background-colour-main);
}

/*PAGE LAYOUTS*/
.pagecontainer {
    display: block;
    margin: auto;
    height: 100%
}

.doublelayout {
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: row !important;
    flex-wrap: wrap-reverse !important;
    justify-content: space-evenly !important;
    align-items: center !important;
}

.doublelayout-slot {
    min-width: 300px;
    height: 100%;
}

    .doublelayout-slot > img {
        min-width: 300px;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 64px); /*NAV BAR -56*/
    }

@media screen and (max-width: 1250px) {
    .hideifnarrow {
        display: none;
    }
}

.sim-form-panel {
    padding: 20px;
    min-width: 350px;
}

.spreadtoborders {
    display: flex;
    justify-content: space-between;
}

.errorpanel {
    background-color: var(--input-background-color-main);
    border-radius: 5px;
    margin: 5px;
    margin-left: 0;
    margin-right: 0;
}

.verticalcardlist {
    display: flex;
    flex-direction: column;
    align-items:center;
}

.services {
display:flex;
flex-direction:row;
justify-content:space-around;
flex-wrap:wrap;
}

.smallcard:not(:first-child) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.smallcard {
    width: 240px;
    margin: 15px;
}
    .smallcard > img {
        width:200px;
        height:auto;
        margin-bottom:25px;

    }

        /*APP ELEMENTS*/
        a {
            color: var(--text-primary-colour-colour);
            text-decoration: none;
            margin: 5px;
            margin-bottom: 7px;
            margin-top: 8px;
        }
    a:hover {
        color: var(--text-secondary-colour);
        text-decoration: none;
    }

input {
    background: var(--input-background-color-main) !important;
    border: none !important;
    color: var(--text-primary-colour-colour) !important;
    user-select:none!important;
}

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        transition: color 5000s ease-in-out 0s,background-color 5000s ease-in-out 0s;
        /*To keep settings at autofill*/
    }

    input[type='checkbox'] {
        position: relative;
        cursor: pointer;
        margin: 5px;
        margin-bottom: 15px;
        margin-top: 15px;
    }

        input[type='checkbox']:before {
            content: '';
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            top: 50%;
            left: 50%;
            background-color: inherit;
            outline: 1px rgba(255, 255, 255, 0.2) solid;
            transform: translate(-50%, -50%);
            border: solid;
            border-radius: 5px;
            border-color: var(--input-background-color-main);
        }

        input[type='checkbox']:checked:before {
            content: '';
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            top: 50%;
            left: 50%;
            background-color: inherit;
            outline: 1px rgba(255, 255, 255, 0.2) solid;
            transform: translate(-50%, -50%);
        }

        input[type='checkbox']:checked:after {
            content: '';
            display: block;
            width: 6px;
            height: 10px;
            border: solid;
            border-width: 0 2px 2px 0;
            border-color: inherit;
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
        }

select {
    background: var(--input-background-color-main) !important;
    border: none !important;
    color: var(--text-primary-colour-colour) !important;
    user-select: none !important;
}

    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus,
    select:-webkit-autofill:active {
        transition: color 5000s ease-in-out 0s,background-color 5000s ease-in-out 0s;
        /*To keep settings at autofill*/
    }

    select {
        position: relative;
        cursor: pointer;
    }

        select:before {
            content: '';
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            top: 50%;
            left: 50%;
            background-color: inherit;
            outline: 1px rgba(255, 255, 255, 0.2) solid;
            transform: translate(-50%, -50%);
            border: solid;
            border-radius: 5px;
            border-color: var(--input-background-color-main);
        }

        select:checked:before {
            content: '';
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            top: 50%;
            left: 50%;
            background-color: inherit;
            outline: 1px rgba(255, 255, 255, 0.2) solid;
            transform: translate(-50%, -50%);
        }

        select:checked:after {
            content: '';
            display: block;
            width: 6px;
            height: 10px;
            border: solid;
            border-width: 0 2px 2px 0;
            border-color: inherit;
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
        }


label {
    color: var(--text-secondary-colour);
}

.sim-btn-prim, .sim-btn-prim-wide, .sim-btn-sec, .sim-btn-sec-wide {
    height: 40px;
    background: var(--sim-btn-primary) 0% 0% no-repeat padding-box;
    border-radius: 4px;
    opacity: 1;
    color: var(--text-primary-colour);
    text-align: center;
    letter-spacing: 0px;
    color: #F1F5F9;
    opacity: 1;
}

.sim-btn-prim-wide {
    width: 100%;
}

.sim-btn-prim-wide-bold {
    font-weight: bold;
}

    .sim-btn-prim:hover, .sim-btn-prim-wide:hover {
        height: 40px;
        background: var(--sim-btn-primary-hover) 0% 0% no-repeat padding-box;
        border-radius: 4px;
        opacity: 1;
        color: var(--text-primary-colour);
        text-align: center;
        letter-spacing: 0px;
        color: #F1F5F9;
        opacity: 1;
    }

    .sim-btn-prim:focus, .sim-btn-prim-wide:focus{
        height: 40px;
        background: var(--sim-btn-primary-hover) 0% 0% no-repeat padding-box;
        border-radius: 4px;
        opacity: 1;
        color: yellow;
        text-align: center;
        letter-spacing: 0px;
        color: #F1F5F9;
        opacity: 1;
        box-shadow: none;
        outline-color: none;
    }


.sim-btn-sec {
    background-color: var(--sim-btn-sec);
    color: var(--text-primary-colour);
}
.sim-btn-sec-wide {
    background-color: var(--sim-btn-sec);
    width: 100%;
}



.sim-btn-sec:hover, .sim-btn-sec:focus, .sim-btn-sec-wide:hover, .sim-btn-prim-wide:focus {
    background-color: var(--sim-btn-sec-hover);
    color: var(--text-primary-colour) !important;
}


    .table {
        color: var(--text-primary-colour)
    }



/*Sales Panel*/

body:has(.sales-container) {
    margin-bottom: 0;
    background-color: white;
}

.sales-container {
    color: black !important;
    margin: 55px;
}

    .sales-container  * {
        color: black;
    }

        .sales-container * input {
        background-color:lightgray !important;
        }

        .sales-container * select {
            background-color: lightgray !important;