/* Set widths on the form inputs since otherwise they're 100% wide */
/*@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";*/

input,
select,
textarea {
    /*max-width: 1600px;*/
    /*max-width: 2200px;*/
    max-block-size :auto;
}

.container {
    width: 100%;
    max-width: auto;
    /*max-width: 100%;*/

    /*padding-right: 15px;*/
    /*padding-left: 15px;*/

    /*padding-right: .5em;*/
    /*padding-left: .5em;*/
    
    margin-right: auto;
    margin-left: auto;
}

body {
    font: 1rem/1.5 var(--bs-font-sans-serif);
    /*background-color:aqua*/ /*This ready color*/
    /*background-color: #82a0a5;*/ /*This Customised color*/
    /*background-image: linear-gradient(#82a0a5 10%, #ffffff 50%);*/
    /*background-image: linear-gradient(to right,#82a0a5 10%,#ffffff 50%);*/
    /*background-repeat: no-repeat;*/
}

.bootbox .modal-header h4 {
    order: 0;
}

.bootbox .modal-header button {
    order: 1;
}

.mytextbox {
    height: 22px;
    width: 100%;
}

.link {
    font-weight: 400;
    color: #000;
    text-decoration: none;
}

    .link:hover {
        color: #ce0f0f;
        text-decoration: underline;
    }

.linkSubMenu {
    font-weight: 400;
    color: #000;
    text-decoration: none;
    padding-left: 1.5rem;
}

.link-LinkButton {
    color: #889705 !important;
}

    .link-LinkButton:hover, .link-primary:focus {
        color: #a8a782 !important;
    }

.rdivpagetitle {
    /*background-color: #82a0a5;*/
    background-color: #C1C09A;
    padding-top: 10px;
    padding-bottom: 6px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.rdivcontents {
    /*background-color: #82a0a53d;*/
    background-color: #E2E2D0;
    padding-top: 6px;
    padding-bottom: 5px;
    grid-row-gap: normal;
    /*border-bottom-left-radius:5px;
      border-bottom-right-radius :5px;*/
}

.rdivcontentslight {
    /*background-color: #82a0a574;*/
    background-color: #E2E2D0;
    padding-top: 6px;
    padding-bottom: 5px;
    /*border-bottom-left-radius:5px;
      border-bottom-right-radius :5px;*/
}

.rdivgridtitleround {
    /*background-color: #82a0a574;*/
    background-color: #D5D4B9;
    padding-top: 10px;
    padding-bottom: 4px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.rdivgridtitle {
    /*background-color: #82a0a574;*/
    background-color: #D5D4B9;
    padding-top: 10px;
    padding-bottom: 4px;
    /*border-top-left-radius: 5px;
    border-top-right-radius: 5px;*/
}

.btnbackground {
    /*background-color: #e2e7ee;*/
    background-color: #ECECE0;
    margin-top: 5px;
    text-align: center;
    /*border-radius: 5px;*/
}

.ListControl label {
    padding-left: 0.5em;
}

.rdivlogintitle {
    /*background-color: #82a0a567;*/
    background-color: #C1C09A;
    padding-top: 2vh;
    padding-bottom: 2vh;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.rdivlogincontents {
    /*background-color: #82a0a51d;*/
    background-color: #E2E2D0;
    padding: 3vh;
    /*grid-row-gap: .75rem;*/
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.backforthanimation {
    animation-duration: 3s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}


/*$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);*/

/*Color utilies*/ /*(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients)*/
/*

 Red if --my-var is not defined 
    color: var(--my-var, red);

pink if --my-var and --my-background are not defined
    background-color: var(--my-var, var(--my-background, pink));

Gradient Options

A basic linear gradient
    background: linear-gradient(blue, pink);

Changing the direction
    background: linear-gradient(to right, blue, pink);

Diagonal gradients
    background: linear-gradient(to bottom right, blue, pink);

Using angles
    background: linear-gradient(70deg, blue, pink);

Using more than two colors (default is even spread)
    background: linear-gradient(red, yellow, blue, orange); (use .auto-spaced-linear-gradient)

Positioning color stops
    background: linear-gradient(to left, lime 28px, red 77%, cyan);

Creating hard lines
    background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);

Gradient hints (Change Mid Point)
    background: linear-gradient(blue, 10%, pink); (from 50% to 10%)

Creating color bands & stripes
    background: linear-gradient
    (
    to left,
    lime 20%,
    red 30%,
    red 45%,
    cyan 55%,
    cyan 70%,
    yellow 80%
  )
    or
    background: linear-gradient(
    to left,
    lime 20%,
    red 30% 45%,
    cyan 55% 70%,
    yellow 80%
  )

Controlling the progression of a gradient
    background: linear-gradient(to top, lime, 20%, cyan)   (with hint)
    background: linear-gradient(to top, lime, cyan);    (without hint)

Overlaying gradients
    background: linear-gradient(to right, transparent, mistyrose),
    url("critters.png");

Stacked gradients
    You can even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible.
    background: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.8),
      rgba(255, 0, 0, 0) 70.71%
    ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}



*/