html
{
    touch-action: manipulation;
}

html, body
{
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper
{
    height: 100%;
    min-height: 100%;
}
.bc-template{
    padding: 20px;
}

.hidden{
    visibility: hidden;
}

.bc-container{
    display:inline-block;
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
}

.btn-primary{
    color: white;
}

.btn-warning.disabled, .btn-primary.disabled, .btn-danger.disabled, .btn-info.disabled, .btn-info.disabled {
    opacity: 0.4;
}

.notchangeover:hover {
    background-color: inherit !important;
    background-image: none !important;
}

input.bc-checkbox[type=checkbox] {
    display: none;
}

/*
- Style each label that is directly after the input
- position: relative; will ensure that any position: absolute children will position themselves in relation to it
*/
input.bc-checkbox[type=checkbox] + label {
    position: relative;
    height: 350px;
    width: 100%;
    display: block;
    /*border-radius: 50%;*/
    /*transition: box-shadow 0.4s, border 0.4s;*/
    border: solid 5px #FFF;
    box-shadow: 0 0 1px #FFF;/* Soften the jagged edge */
    cursor: pointer;


    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

/* Provide a border when hovered and when the checkbox before it is checked */
input.bc-checkbox[type=checkbox]:checked + label {
    border: solid 5px #F00;
    box-shadow: 0 0 1px #F00;
    /* Soften the jagged edge */
}
/*
- Create a pseudo element :after when checked and provide a tick
- Center the content
*/
input.bc-checkbox[type=checkbox]:checked + label:after {
    content: '\2714';
    /*content is required, though it can be empty - content: '';*/
    height: 1em;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    color: #F00;
    line-height: 1;
    font-size: 48px;
    text-align: center;
}

input.fullwidthtext,textarea{width:100%;display:block}

input {
    text-transform: uppercase;
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 400px;
    overflow-y: auto;
}

#genderSelect:disabled{
    background: #E8E8E8;
    color: #696969;
}

.checkBox2x {
    transform: scale(2);
}

#bc-image-list > input[type="checkbox"]{
    transform: scale(2);
}

.bcImageSelection{
    width: 420px;
    height: 420px;
}

#drawingToolSelect{
    font-size: 18px;
}

.top20margin{
    margin-top: 20px;
}

.top80margin{
    margin-top: 80px;
}

.font25px{
    font-size: 25px;
}

.bodydraw-main-div {
    position: absolute;
    x:0;
    y:0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
}

.bodydraw-main-div .bodydraw-main-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.bodydraw-main-div .bodydraw-markers-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    touch-action: none;
}

.bodydraw-main-div .bodydraw-markers-div .marker {
    text-align: center;
    position: absolute;
    width:40px;
    height:40px;
}

.bodydraw-main-div .bgimage {
    image-rendering: auto;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index:500;
}


.bodydraw-main-div .tools {
    width: 70px;
    /*height:300px;*/
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
    z-index:2000;
    touch-action: none;
}

.bodydraw-main-div .timed_marker_counter {
    left: 90%;
    top:  2%;
    font-size: 22px;
    text-align: right;
    color: red;
}

.bodydraw-main-div .bottom-tools {
    text-align: right;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width:210px;
    display: inline-block;
    z-index:2000;
}
.bodydraw-main-div .bottom-tools .btn {
    width: 100px;
}

.bodydraw-main-div .stroke-size {
    width:70px;
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    top: 50%;
    left: 80px;
    transform: translate(0%,-50%);
    z-index:2000;
    touch-action: none;

}

.bodydraw-main-div .pencil
{
    display: inline-block;
    border: solid 2px dimgrey;
    width: 50px;
    height: 50px;
    line-height: 40px;
    margin: 10px 10px 10px 10px;
    cursor: pointer;
    border-radius: 10px;
    text-align: center;
    vertical-align: bottom;
    color: #000;
    touch-action: none;
    background-color: white;
}

.bodydraw-main-div .stroke-demo {
    background-color: black;
    position: relative;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.bodydraw-main-div .button_selected
{
    border: solid 5px black !important;
    background-color: gray !important;
}

.bodydraw-main-div .tools .pencil i
{
    position:relative;
    top:50%;
    transform: translate(0,-50%);
}

.alert-danger {
    background-image: -webkit-linear-gradient(top,#ff4444 0,#ff9999 100%);
    background-image: -o-linear-gradient(top,#ff4444 0,#ff9999 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ff4444),to(#ff9999));
    background-image: linear-gradient(to bottom,#ff4444 0,#ff9999 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
    background-repeat: repeat-x;
    border-color: #dca7a7;
}



@media (orientation: landscape) {
    .container{
        display: none;
    }

    #avoidLandscape{
        position: absolute;
        width: 100%;
        height: 100%;
        background: white url("/images/rotate.png") no-repeat center;
        z-index:10000;
    }
}