/* ************* Common Elements ************************** */
body {
    margin:0;
    /*	font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 200;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    color: #4d5b76;

    transition: background-color .5s;
    */
    background-color: #fff;
    color: #000;
    font: normal 15px/27px "Open Sans",sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h3 {
    background: #fff;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #ffffff;
    padding: .0em 0em .25em 0em;
    margin: 0px 0em 0em 0em;
    width: 100%; /* Full width */
}

label {
    font-weight: normal;
    display: inline-block;
    margin-bottom: 0px
}

/* Style inputs with type="text", select elements and elements */
input[type=text], input[type=date], input[type=time], input[type=datetime-local], input[type=password], input[type=number], input[type=email], textarea {
    width: 100%; /* Full width */
    padding: 10px;
    /*margin-top: 6px;*/ /* Add a top margin */
    /*margin-bottom: 16px;*/ /* Bottom margin */
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
    font-size: 13px;
    /*	font-weight: 200;
            font-size: 100%;
    */	color: #000;
}

.spanText {
    padding: 6px;
    border: 1px solid green; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    font-size: 13px;
    color: green;
}

input[type="text"]:read-only {
    cursor: normal;
    background-color: #f8f8f8;
    color: #000;
}

input[type=radio], input[type=checkbox] {
    /*	padding: 12px 20px;
    margin-top: 6px;
    margin-bottom: 16px;
    margin-right: 6px;
    font-size: 13px;
    font-weight: 200;
    font-size: 100%;
    */	color: #000;
}

/* Add a background color and some padding around the form */
.container {
    /*	border-radius: 5px;*/
    /*background-color: #f2f2f2; by saji */
    padding: 55px 10px 10px 10px;
}

select {
    width: 100%; /* Full width */
    padding: 9px 10px;
    /*margin-top: 6px;*/ /* Add a top margin */
    /*margin-bottom: 16px;*/ /* Bottom margin */
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 13px;
    /*	font-weight: 200;
            font-size: 100%;
    */	color: #000;
}

/* Set a style for all buttons */
button {
    padding: 12px 20px;
    margin-top: 6px; /* Add a top margin */
    /* margin-bottom: 16px; Bottom margin */

    background-color: #4CAF50;
    color: #fff;
    /*	padding: 14px 20px;
    margin: 4px 0;
    */	border: none;
    cursor: pointer;
    border-radius: 4px;
    /*	width: 100%;*/
    font-size: 16px;
    font-weight: normal;

    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

button:hover {
    opacity: 0.8;
    background-color: #45a049;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

/* Extra styles for the cancel button */

.cancelbtn {
    /*	width: auto;
    padding: 10px 18px;
    */	background-color: #f44336;
}
.cancelbtn:hover {
    /*	width: auto;
    padding: 10px 18px;
    */	background-color: #8b0000;
}


.form-group {
    margin-bottom: 30px;
}


.infoLabel {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: .25em;
    margin: 10px 5px;
    white-space: nowrap;

}

.infoLabel-info {
    background-color: #5bc0de;
}

.infoLabel-success {
    background-color: #5cb85c;
}

.infoLabel-error {
    background-color: #d9534f;
}

.infoLabel-warning {
    background-color: #f0ad4e;
}



/* ************* End: Full-width input fields ************************** */



/* ************* Accordion menu buttons ************************** */
/*button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 95%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
background-color: #ccc;
}

div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
width: 95%;
border-radius: 5px;
}
*//* ************* End: Accordion menu buttons ************************** */


/* ************* Left navigation menu ************************** */


#main {
    transition: margin-left .5s;
    /*padding: 16px;*/
    width: 95%;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    /*	.sidenav a {font-size: 18px;}
    */}

/* the below code is to print table header on every page - while printing*/
@media print {
    thead {
        display: table-header-group;
    }
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #999;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

/*.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 15px;
color: #818181;
display: block;
transition: 0.3s;
}

.sidenav a:hover {
color: #f1f1f1;
}
*/
.sidenav .closebtn {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    transition: 0.3s;

    color: #f1f1f1;

    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}


/* ************* End left navigation menu ************************** */


/* ************* search textbox ************************** */

input.searchtext {
    /*	height: 41px;
width: 150px;		*/
    /*	box-sizing: border-box;
    */	border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    background-color: white;
    background-image: url('../img/searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    color: #000;
}

input.searchtext:focus {
    width: 100%;
}


/* ************* End: end of search textbox ************************** */


/* ************* Table ************************** */

* {
    box-sizing: border-box;
}

#myInput {
    background-image: url('/css/searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 12px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}

.myTable {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
    font-size: 12px;
    border-radius: 4px;
}

.myTable th {
    text-align: left;
    padding: 6px 5px 6px 20px;
}


.myTable td {
    text-align: left;
    padding: 6px 5px 6px 20px;
}

.myTable tr {
    border-top: 1px solid #ddd;
}

.myTable tr.header {
    background-color: #f1f1f1;
}

.myTable tr:hover {
    background-color: #ffff99;
}



/* Paination */

div.pagination {
    padding: 3px;
    margin: 3px;
}

div.pagination a {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #AAAADD;
    zoom: 100%;
    text-decoration: none; /* no underline */
    color: #000099;
}
div.pagination a:hover, div.pagination a:active {
    border: 1px solid #4CAF50;

    color: #000;
}
div.pagination span.current {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #4CAF50;

    * zoom: 100%;

    font-weight: bold;
    background-color: #4CAF50;
    color: #FFF;
}
div.pagination span.disabled {
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #EEE;

    * zoom: 100%;

    color: #DDD;
}

* span.elipsis {
    zoom:100%
}

/* end paination*/

/* ************* End: Table ************************** */


/* ************* top navigation ************************** */
/* Add a black background color to the top navigation  */

/*.topnav {
        background-color: #000;
        height: 48px;
        width: 100%;
        position: fixed;
        z-index: 5;
}*/
/* NEW UPDATED COLOR FOR VESRION 0.1 (14/11/2023)) */
.topnav {
    background-color: #92164a;
    height: 48px;
    width: 100%;
    position: fixed;
    z-index: 5;
}


.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #bf9940;/* background-color: #ddd; (14/11/2023)*/
    color: #000;
}

.topnav a.active {
    background-color: #bf9940; /* background-color: #4CAF50;(14/11/2023)*/
    color: white;
    height: 48px;
}


.topnav .search-container {
    float: right;
}

.topnav input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: none;
    border-radius: 0px;
}

.topnav .search-container button {
    width: 30px;
    float: right;
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
    border-radius: 0px;
    height: 32px;
}

.topnav .search-container button:hover {
    background: #ccc;
}


.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}



/*@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}*/

/* ************* end of top navigation ************************** */




/* ************* Responsive DIV ************************** */

/* container with 4 columns */
#container-4-cols {
    width : 1210px;
}

.holder-4-cols {
    width : 300px;
    padding: 10px;
    /*height : 100px;
    border : 1px solid red;*/
    display : inline-table;
    float : left;
}
/* end: container with 4 columns */

/* container with left pane 25% and right pane 75% columns */
/* good for left search and right result */
#container-full-cols {
    width : 100%;
}

.holder-border {
    border: 1px solid #ccc;
    background: white;
    border-radius: 3px;
    padding: 0px;
}

.holder-top-header {
    border-bottom: 1px solid #ccc;
    border-left: none;
    color: #333;
    display: block;
    margin-bottom: 0px;
    text-shadow: none;
    text-transform: none;
    font-size: .85em;
    line-height: 1.5em;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efefef), color-stop(1, #fafafa));
    width : 100%;
    padding: 10px;
    height : 20px;
    display : inline-table;
    float : top;
}

.holder-left-pane {
    width : 25%;
    /*height : 100px;
    border : 1px solid red;*/
    display : inline-table;
    float : left;
    margin-right: 10px;
}
.holder-right-pane {
    width : 74%;
    /*padding: 10px;*/
    /*height : 100px;
    border : 1px solid red;*/
    display : inline-table;
    float : left;
}

.holder-data-area {
    padding: 10px;
}
/* container with left pane 25% and right pane 75% columns */


.container-clear {
    clear:both;
}


/*@media (max-width: 600px)
{
#container-4-cols {
width : 100%;
}
.holder-4-cols {
width : 100%;
}
}*/

.div-with-border {
    width: 100%;
    padding: 12px 20px;
    margin-top: 6px;
    margin-bottom: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    font-size: 13px;
    /*		font-weight: 200;
                    font-size: 100%;
    */		color: #000;
}

/* ************* End : Responsive DIV ************************** */

/* ************* Loader/ process DIV ************************** */

#divloader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    border-right: 16px solid green;
    border-bottom: 16px solid red;
    border-left: 16px solid pink;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

/* ************* End : Loader/ process Div  ************************** */


/* ************* Snackbar at the bottom DIV ************************** */

#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #ca473f;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 16px;
    position: fixed;
    z-index: 100;
    left: 50%;
    bottom: 130px;
    font-size: 17px;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }
    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }
    to {
        bottom: 0;
        opacity: 0;
    }
}

/* ************* End: Snackbar at the bottom DIV ************************** */

/* ************* FlipCard ************************** */
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: #bbb;
    color: black;
    z-index: 2;
}

.flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
    z-index: 1;
}
/* ************* end: FlipCard ************************** */



.formTable {
    font: normal 15px/27px "Open Sans",sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    border-collapse: collapse;
}

.formTable td {
    border: 1px solid #ddd;
    padding: 3px 3px 3px 3px;
}

.field_area {
    background-color:#f1f1f1;
    color:#000;
    text-align:left;
}