/* CSS Document */

/*Fix btns to word wrap*/
.btn{
    white-space:normal;
}

.validator
{
    color:red;
    font-style: italic;
}


.section_subtitle
{
    font-weight:bold; 
}


.box_link
{
    background: url(images/arrow_forward.png) no-repeat right center;
}
    .box_link:hover
    {
	    cursor:pointer;
    }
    
    ._back
    {
        background: url(images/arrow_back_2.png) no-repeat left center;
    }

    ._home {
        background: url(images/arrow_home.png) no-repeat left center;
    }


    ._delete
    {
        background: url(images/trashcan.png) no-repeat left center;
    }


    ._reply
    {
        background: url(images/reply_arrow.png) no-repeat left center;
    }


    ._download_pdf
    {
        background: url(images/pdf_export.png) no-repeat left center;
    }

    ._greencheck 
    {
        background: url(images/checkbox_green.png) no-repeat left center;
    }

    ._padlock
    {
        background: url(images/padlock.png) no-repeat left center;
    }



.header_box
{
    color:#ffffff; /*White*/
    font-weight:bold;
    padding-left: 10px; 
    /* Round the Top Corners (CSS 3) */
    -webkit-border-top-left-radius: 16px;
    -webkit-border-top-right-radius: 16px;
}
    .hp .header_box
    {
        border: 2px solid #73a8d8; /*Ocean Blue*/
        background-color: #73a8d8; /*Ocean Blue*/
    }
    .es .header_box
    {
        border: 2px solid #9789b4; /*Purple*/
        background-color: #9789b4; /*Purple*/
    }


.content_box
{
    background-color:#ffffff; /*White*/
    padding-top:10px; 
    padding-bottom:10px;
    padding-left:10px;
    /* Round the Top Corners (CSS 3) */
    -webkit-border-bottom-left-radius: 16px;
    -webkit-border-bottom-right-radius: 16px;
    clear:both;
}
    .hp .content_box
    {
        border: 2px solid #73a8d8; /*Blue*/
    }
    .es .content_box
    {
        border: 2px solid #9789b4; /*Purple*/
    }


.info_box
{
    background-color:#ffffff; /*White*/
    padding-top:10px; 
    padding-bottom:10px;
    padding-left:10px;
    /* Round the Corners (CSS 3) */
    -webkit-border-bottom-left-radius: 16px;
    -webkit-border-bottom-right-radius: 16px;
    -webkit-border-top-left-radius: 16px;
    -webkit-border-top-right-radius: 16px;
}


.question
{
    font-weight:bold;
}

		
.Question_Category
{
    min-height:20px; 
    background-color:#c9d7e5;
    border-bottom:1px solid #7196bb; 
    border-top:1px solid #7196bb;
    color:#44698f;
    font-weight:bold;
}
        
.error
{
    font-weight:bold;
    color:Red;
}

.spacer_div
{
	height:15px; 
	clear:both;
}


/*---------------------------------------------*/
/*----------- DARK MODE STYLING ---------------*/
/*---------------------------------------------*/
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1e1e1e;
        color: #dcdcdc;
    }

    a {
        color: #48f0ec; /*Teal*/
    }

    .card {
        background-color: #1e1e1e;
        border: 1px solid #ccc;
    }

    .card-header {
        border: 1px solid #ccc;
    }

    .Menu_Section_Title {
        color: #c5a0f0;
    }

    .Menu_Section_Subtitle {
        color: #0eb9db;
    }

    .list-group > a {
        color: #dcdcdc; /*White*/
        background-color: #1e1e1e; /*Black*/
    }

        .list-group > a:hover {
            color: #fff;
            background-color: #656565;
        }


    .bg-light {
        background-color: rgb(52, 58, 64) !important; /*Dark_Grey*/
    }


    .text-muted {
        color: #a1aab3 !important;
    }

    label {
        color: #38c0fc; /*Blue*/
    }

    .Square_Wrapper {
        border: 10px solid #1e1e1e; /*Black*/
    }

    .Square {
        color: #1e1e1e; /*Black*/
    }

    .btn-outline-primary {
        color: #48f0ec; /*Teal*/
        border-color: #48f0ec; /*Teal*/
    }

    .mobile_div {
        background-color: #1e1e1e;
        border-color: #ccc;
    }

    ._back {
        background-color: #1e1e1e;
    }

    .info_box
    {
        background-color:#343a40; /*Grey*/
        padding-top:10px; 
        padding-bottom:10px;
        padding-left:10px;
        /* Round the Corners (CSS 3) */
        -webkit-border-bottom-left-radius: 16px;
        -webkit-border-bottom-right-radius: 16px;
        -webkit-border-top-left-radius: 16px;
        -webkit-border-top-right-radius: 16px;
    }

    .form-control-plaintext 
    {
        color: #fff;
    }

    .Certificate_Content 
    {
        color: #212529;
    }

    .table 
    {
        color: #dcdcdc;
    }

    .text_question_choice{
        color: #ffffff !important;
    }
}