/*The dot( . ) signifies a class name while the hash ( # ) signifies 
    an element with a specific id attribute. The class will apply to 
    any element decorated with that particular class, while the # style 
    will only apply to the element with that particular id
    */

/* The !important flags are used to override the jQuery library.  There must be a better way to do this! */


body
{
    font-family: verdana;
}

.checkboxcontainer
{
    border: 2px solid #ccc;
    width: 300px;
    height: 100px;
    overflow-y: scroll;
}

#header
{
    background-color: #C40D42;
    color: white;
    text-align: center;
    padding: 5px;
}

#section
{
    width: 750px;
    float: left;
    padding: 10px;
}

#footer
{
    background-color: #C40D42;
    color: white;
    clear: both;
    text-align: center;
    padding: 5px;
}

.myButton
{
    background-color: #354254 !important; /*Derek se blou*/
    /*border: outset !important;*/ /* 1px solid #ccc; */ /*ridge or outset*/
    border-color: white !important;
    border-radius: 10px !important; /* Round corners */
    color: white !important; /* Font colour */
    cursor: pointer !important;
    display: inline-block !important;
    font-size: 16px !important;
    height: 48px !important;
    margin: 0px 2px !important; /*top right bottom left*/
    outline: none !important;
    /*outline-color: brown !important;*/
    /*    outline-style: none !important;
    outline-width: thin !important;*/
    /*padding: 4px 24px 4px 24px;*/ /*top right bottom left*/
    text-align: center !important;
    text-decoration: none !important;
    vertical-align:bottom;
    white-space:pre-line;
    width: 108px !important;
} /*.myButton*/

    .myButton:hover
    {
        background-color: #354254 !important; /*Derek se blou*/
        border: outset !important; /* 1px solid #ccc; */ /*ridge or outset*/
        border-width:2px !important;
        border-color: yellow !important;
        border-radius: 10px !important; /* Round corners */
        color: white !important; /* Font colour */
        cursor: pointer !important;
        display: inline-block !important;
        font-size: 16px !important;
        height: 48px !important;
        margin: 0px 2px !important; /*top right bottom left*/
        outline: none !important;
        /*padding: 4px 24px 4px 24px;*/ /*top right bottom left*/
        text-align: center !important;
        text-decoration: none !important;
        /*-moz-box-shadow: inset 0px 0px 5px #c1c1c1 !important;*/
        /*box-shadow: inset 0px 0px 5px #c1c1c1 !important;*/
    } /*hover*/

    .myButton:focus
    {
        background-color: #354254 !important; /*Derek se blou*/
        border: outset !important; /* 1px solid #ccc; */ /*ridge or outset*/
        border-width: 2px !important;
        border-color: yellow !important;
        border-radius: 10px !important; /* Round corners */
        color: white !important; /* Font colour */
        cursor: pointer !important;
        display: inline-block !important;
        font-size: 16px !important;
        height: 48px !important;
        margin: 0px 2px !important; /*top right bottom left*/
        outline: outset !important;
        outline-width: thin !important;
        outline-color: brown !important;
        /*padding: 4px 24px 4px 24px;*/ /*top right bottom left*/
        text-align: center !important;
        text-decoration: none !important;
    } /*focus*/

    .myButton:active
    {
        /*border:double; */
        /*outline:none;
        -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
        -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
        box-shadow: inset 0px 0px 5px #c1c1c1;*/
        /*box-shadow: 0 0px #666;*/
        transform: translateY(2px) !important; /* Feedback on click */
    }

/*.ui-datepicker
{
  width: 50em !important;
}*/

/*Hide close button (X) content title bar*/
.ui-dialog-titlebar-close
{
    visibility: hidden !important;
}

/* Dropdown Button */
.dropbtn
{
    text-align: left !important;
    color: black !important;
    background-color: bisque !important;
    border-color: lightgray !important;
    width: 280px !important;
    padding: 4px 16px 4px 16px !important;
    margin: 2px 8px 2px 8px !important; /* Top right bottom left */
    font-size: 16px !important;
    border: ridge !important; /* none */
    /* box-shadow: 0px 8px 16px 0px goldenrod; */
    border-radius: 10px !important;
}

/* The container <div> - needed to position the dropdown content */
.dropdown
{
    position: center !important;
    display: inline-block !important;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content
{
    text-align: left !important;
    display: none !important;
    position: absolute !important; /* relative; absolute; */
    left: 60px !important; /*120*/
    /*top:0px; */ /* Display next to the main item*/
    background-color: bisque !important; /* #f1f1f1; */
    min-width: 200px !important;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) !important;
    z-index: 1 !important;
    border: dashed medium !important; /*ridge; dashed*/
    border-radius: 10px !important;
    border-color: gray !important;
    white-space: nowrap !important; /* For auto-width */
}

    /* Links inside the dropdown */
    .dropdown-content a
    {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover
        {
            background-color: goldenrod;
        }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content
{
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn
{
    background-color: goldenrod;
}

.cursor-wait
{
    cursor: wait !important;
}

.ui-widget-header
{
    background: #354254 !important; /* 1-0-0 */
    color: white !important;
}