/*https://simpleit.rocks/python/django/forms/how-to-use-bootstrap-4-in-django-forms/*/

@font-face {
    font-family: var(--myfontfamily),serif;
    src: var(--myfontsrc);
    /*src: url('/static/Fonts/rajdhani-bold.ttf');
    src: url('/static/Fonts/rajdhani-light.ttf');
    src: url('/static/Fonts/rajdhani-medium.ttf');
    src: url('/static/Fonts/rajdhani-semibold.ttf');*/
}


body {
    font-family: var(--myfontfamily),serif;
    margin: 20px;
    background-color: var(--mybackgroundcolor);
    /*background-image: url('/static/BlueTucson.jpg');*/
}


html {
    background: var(--myloginbackgroundimage) no-repeat center center fixed;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}


p {
	color: var(--mytextcolor); 
}
#error {
    color: var(--myerrortextcolor); /*color of error text in login page for incorrect username or pwd*/
}

/*font color of the login username and password box*/
#username, #password {
    color: var(--mytextcolor);
    font-size: 16pt;
    background-color: var(--mylogintextboxbackgroundcolor);
}

h1 {
    color: var(--myloginheadercolor);
}

/*http://jsfiddle.net/Jj422/*/
form {
    width: 450px; /* this is needed */
    height: 550px; /* this is needed */
    padding: 10px; /* this is for styling only */
    background: var(--mybackgroundcolor); /*#eee;  this is for styling only */

    position: absolute; /* this is needed */
    margin: auto; /* this is needed */
    left: 0; /* this is needed */
    right: 0; /* this is needed */
    top: 0; /* this is needed */
    bottom: 0; /* this is needed */
    border-style: solid;
    border-color: var(--myloginbordercolor);
}



label {
    color: var(--mytextcolor);
    padding: 0px;
    font-size: 30px;
    margin: 0 auto;
}

/*table row id where a border is needed*/
form-text {
    border: 4px solid var(--mytextcolor);
}

.logo {
    /*define the height and width for the company logo button Diana made */
    width: 200px;
    height: 200px;
}

/*needed for the login page to work*/
.form-control {
    border: 0px solid transparent;
    background-color: var(--myloginformcontrolbackgroundcolor);
    width: 100%;
}

.create_custom_shape{
	border: 2px solid  var(--myloginbordercolor);
	position:relative;
    width:100%;
}

/*add the black traingle to right hand corner of rectangle*/
    .create_custom_shape:after {
        content: '';
        position: absolute;
        width: 0px;
        height: 0px;
        border-bottom: 20px solid var(--mycustomshapeafterborderbottomcolor);
        border-left: 20px solid transparent;
        bottom: -2px;
        right: -2px;
    }

/*to get the horizontal line we are hiding a triangle behind
the after triangle*/
    .create_custom_shape:before {
        content: '';
        position: absolute;
        width: 2px;
        height: 0px;
        /*border-bottom: 25px solid rgb(27, 99, 114);
	border-left: 15px solid transparent;*/
        border-bottom: 20px solid var(--mycustomshapebeforeborderbottomcolor);
        border-left: 20px solid transparent;
        bottom: -1px;
        right: -1px;
    }


/*arrow css*/
.arrowiconleft {
    width: 100px;
    height: 30px;
    padding-right: 30px;
}

.arrowiconright {
    width: 100px;
    height: 30px;
    padding-left: 30px;
}

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