/* Add a top margin to avoid content overlay */
.main {
    margin-top: 90px; /* Add a top margin to avoid content overlay */

    color: #033D56;
}

h1 {
    color: #2E88AF;
    font-size: 2rem;
    margin-bottom: 1rem;
}

h3 {
    margin-bottom: 0.5rem;
    color: #DF7601;
}

.button {
    background-color: #2E88AF;
    border: none;
    border-radius: 4px;
    color: white!important; /* important to override 'a visited' when using a elements as buttons */
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover:enabled {
    background-color: #FFAE15;
    color: #FFF;
}

.blockSizeInput {
    width: 40px;
}


/* Styled checkboxes ----------------*/
.checkBoxContainer {
    display: block;
    position: relative;
    padding-left: 23px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 18px;
}

/* Hide the default checkbox */
.checkBoxContainer input {
    visibility: hidden;
    cursor: pointer;
}

/* Create a custom checkbox */
.mark {
    position: absolute;
    top: 0;
    left: 0;
    height: 17px;
    width: 17px;
    background-color: lightgray;
}
  
.checkBoxContainer:hover input ~ .mark {
    background-color: #FFAE15;
}
  
.checkBoxContainer input:checked ~ .mark {
    background-color: #2E88AF;
}

.checkBoxContainer:hover input:checked ~ .mark {
    background-color: #FFAE15;
}
  
/* Create the mark/indicator (hidden when not checked) */
.mark:after {
    content: "";
    position: absolute;
    display: none;
}
  
/* Show the mark when checked */
.checkBoxContainer input:checked ~ .mark:after {
    display: block;
}
  
/* Style the mark/indicator */
.checkBoxContainer .mark:after {
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(40deg);
}
/* ------------end of styled checkboxes */


/* Make it like a navbar to be fixed floating over the content */
.informationBlockContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    
    margin: 2px;

    overflow: hidden;

    z-index:1;
}

.sourceInfoBlock,.destinationInfoBlock {
    width: 49.9%;
    background-color: #07648ce1;
    border-radius: 20px;
}

.sourceInfoBlock {
    float: left;
}

.destinationInfoBlock {
    float: right;
}

.imageInformationBlock {
    height: 48px;

    color: white;
    background-color: rgb(41, 94, 119);
    border: 2px outset rgb(29, 67, 85);

    padding: 10px;
    margin: 2px;
    
    float: left;

    border-radius: 20px;
}

.fileInfo {
    width: 250px;
}

.posInfo {
    width: 100px;
}

.idInfo {
    width: 40px;
}

.currentTileInfo {
    color: white;
    background-color: rgb(41, 94, 119);
    border: 2px outset rgb(29, 67, 85);

    padding: 10px;
    margin: 2px;
    
    float: left;

    border-radius: 20px;

    float: right;

    position: fixed;
    right: 0;
}

.tile {
    border: none;
}

.sourceImageContainer,.destinationImageContainer {

    min-width: 400;
    min-height: 600;

    color: white;
    background-color: #DF7601;
    border: 5px outset black;

    float: left;

    margin: 10px;
}

.sourceImageContainer {
    scrollbar-width: 10;
}

.destinationImageContainer {
    scrollbar-width: 10;
}

.filechooser {
    margin: 5px;
}

.image {
    /*min-width: 100px;
    min-height: 100px;*/

    background-color: rgb(0, 0, 0);
    border: 5px inset black;

    display: block;
    margin: 2 auto;
    padding: 5px;

    image-rendering: auto;
    image-rendering: pixelated;
}

.highlighter {
    display: none;

    border: seagreen;
    border-style: dotted;
    border-width: 2px;

    position:absolute;

    width: 32px;
    height: 32px;

    color: white;
    text-align: center;

    font-size: 12;
    font-weight: bold;

    /* let all mouse events pass through this object like it is not there */
    pointer-events: none;
}

.highlighterFixed {
    border:turquoise;
    border-style: solid;
    border-width: 3px;
}

.terms {
    bottom: 0px;
    float: left;
    width: 66%;
    color: whitesmoke;
    background-color: #2E88AF;
    margin: 10px;
    padding: 50px;
}