﻿/* 
A RTL version of the responsive table described in the CSS-Tricks article:
http://css-tricks.com/responsive-data-tables/ 
*/

* {
    margin: 0;
    padding: 0;
}

/*body { font: 14px/1.4 Georgia, Serif;  }*/

/* Generic Styling, for Desktops/Laptops */

table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
    border-spacing: 0;
}

/* Zebra striping */

tr:nth-of-type(even) {
    background: #f9f9f9;
}

th {
    background: #B39056;
    font-size: medium;
    font-weight: bold;
}

tr {
    border-top: 1px solid #ddd;
    line-height: 1.42857;
    padding: 8px;
    vertical-align: top;
}

td, th {
    padding: 8px;
    /*border: 1px solid #ccc;*/
    border: none;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/

/*@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1020px) {*/
@media only screen and (max-width: 760px) 
{
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    tr {
        border: 1px solid #ccc;
    }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #ccc;
        position: relative;
        padding-right: 50%;
        overflow: hidden;
    }

        td:before {
            display: inline-block;
            position: relative;
            vertical-align: top;
            width: 90%;
            margin-left: 10%;
            margin-right: -100%;
            float: right;
            overflow: hidden;
        }
}

.iframe-container {
    padding-bottom: 60%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

    .iframe-container iframe,
    .iframe-container object,
    .iframe-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.modal.in .modal-dialog {
    transform: none; /*translate(0px, 0px);*/
	margin-top:0;
}





@media (min-width: 420px) {
    .modal.in .modal-dialog {
        width: 95%;
    }
}

@media (min-width: 768px) {
    .modal.in .modal-dialog {
        width: 80%;
    }
}

@media (min-width: 992px) {
    .modal.in .modal-dialog {
        width: 60%;
		margin-top:0;
    }
}


@media (min-width: 1100px) {
    .modal.in .modal-dialog {
        width: 70%;
		margin-top:0;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    body {
        padding: 0;
        margin: 0;
        width: 100%;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        width: 100%;
    }
}



/*input[type='checkbox'] {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 4px;
            border: 1px solid #555;
            background-image: none;
        }        
            input[type='checkbox']:checked {
                /*background: #ff6a00;*/
/*background-image: url("../images/ok3.png");
                background-size: cover;
            }*/
.k-filename {
    display: inline-block;
    min-width: 2.167em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

li.k-file div.file-wrapper {
    position: relative;
    height: 25px;
}

.k-dropzone {
    margin-top: 0px;
    padding: 0px;
    max-height: 1.167em;
}

.k-upload-pct {
    display: none !important;
}

.hide {
    display: none;
}

.k-upload-button:hover {
    color: #000 !important;
    background-color: #31b0d5 !important;
    border-color: #269abc !important;
}

div.k-dropzone em {
    visibility: hidden;
}

.k-upload-status-total {
    visibility: hidden;
}


.k-datepicker {
    width: 80%;
}

.space {
    margin-bottom: 4px;
}

.navbar-default {
    background-color: #f7f0e6;
    border-color: #e7e7e7;
}

/*  Toggle Menu  */
#dvmenu {
    display: block;
}

#btnShowmenu {
    display: none;
}


@media screen and (max-width: 768px) and (min-width: 320px) {
    .navbar-default {
        width: 100%;
        z-index: 9999;
    }

    #dvmenu {
        display: none;
    }

    #btnShowmenu {
        display: block;
    }
}


.nav > li > a {
    color: #000;
}

    .nav > li > a:hover, .nav > li > a:focus {
        background-color: #d0e9c6;
    }

input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error {
    background: #FEF1EC;
    border: 1px solid #CD0A0A;
}

.required {
    color: #F11828;
}

.alert-box {
    color: #555;
    border-radius: 10px;
    padding: 10px 36px;
    margin: 10px;
}

.warningRmk span {
    font-weight: bold;
    text-transform: uppercase;
}

.warningRmk {
    color: #555;
    float: right;
    background: #ffecec url('/images/warning.png') no-repeat 10px 50%;
    border: 1px solid #f5aca6;
}
.modal-body-center
{
    text-align:center;
}