/* Author : Vinothraja | Date : 18-Aug-2016 */
.content_left {float:left; width:75%;}
.content_left_top {float:left; width:100%; height:48px;} /*background:#001831;*/
.top_right_div {float:right; width:auto;}

.top_logo {float:left; width:auto; padding:10px; color:#FFF; text-transform:uppercase; font-weight:bold; font-size:24px;} /*background:#1c5da0;*/
.arrow-right {float: left; width: 0px; height: 0px; border-top: 24px solid transparent; border-bottom: 24px solid transparent;} /*border-left: 20px solid #1c5da0;*/
.app_name {float:left; width:auto; color:#FFF; padding:5px; font-size:24px; margin-left:10px;}
.content_left_middle {float:left; width:98%; background:rgba(255,255,255,0.5); padding:2% 1%;}
.events_div_red {float:left; width:17%; height:120px; background:linear-gradient(#bd2f1b 50%,#811805 50%); margin-left:20px; -moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 -1px 20px rgba(0,0,0,0.5); box-shadow: inset 0 -1px 20px rgba(0,0,0,0.5);}
.events_div_green {float:left; width:17%; height:120px; background:linear-gradient(#92c04a 50%,#265317 50%); margin-left:20px; -moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 -1px 20px rgba(0,0,0,0.5); box-shadow: inset 0 -1px 20px rgba(0,0,0,0.5);}
.events_div_skyblue {float:left; width:17%; height:120px; background:linear-gradient(#64ebcb 50%,#176f35 50%); margin-left:20px; -moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 -1px 20px rgba(0,0,0,0.5); box-shadow: inset 0 -1px 20px rgba(0,0,0,0.5);}
.events_div_blue {float:left; width:17%; height:120px; background:linear-gradient(#6692e4 50%,#10195a 50%); margin-left:20px; -moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 -1px 20px rgba(0,0,0,0.5); box-shadow: inset 0 -1px 20px rgba(0,0,0,0.5);}
.event_name_eng {float:left; width:100%; text-align:center; text-transform:uppercase; color:#FFF; font-weight:bold; padding:10px 0px 0px 0px; min-height: 36px;}
.event_middle {float:left; width:100%;}
.event_icon {float:left;}
.coconut_icon {float:left; width:38px; height:30px; background:url(../images/coconut_icon.png) no-repeat;}
.banana_icon {float:left; width:38px; height:30px; background:url(../images/banana_icon.png) no-repeat;}
.calendar_icon {float:left; width:38px; height:30px; background:url(../images/calendar_icon.png) no-repeat;}
.others_icon {float:left; width:38px; height:30px; background:url(../images/others_icon.png) no-repeat;}
.event_amount {float:right;background: #fdff8a; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, #fdff8a , #57b32a); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, #fdff8a, #57b32a); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, #fdff8a, #57b32a); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, #fdff8a , #57b32a); /* Standard syntax (must be last) */ border-radius:5px 0px 0px 5px; padding:5px; font-weight:bold;}
.event_name_tm {float:left; width:100%; text-align:center; color:#FFF; font-family:amudham; font-weight:bold; padding:0px 0px 10px 0px;}
.content_left_bottom {float:left; width:98%; min-height: 300px; background:rgba(232,238,245,0.5); padding: 2% 1%;}
.content_left_bottom h1 {float:left; width:100%; text-align:center; color:#a01c1c;}
.archanai_list_div {float:left; width:17%; height:120px; background:linear-gradient(#bd2f1b 50%,#811805 50%); margin:20px 0px 0px 20px; -moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 -1px 20px rgba(0,0,0,0.5); box-shadow: inset 0 -1px 20px rgba(0,0,0,0.5);}
.archanai_name_eng {float:left; width:100%; text-align:center; text-transform:capitalize; color:#FFF; font-weight:bold; padding:12px 0px;}
.archanai_name_tm {float:left; width:100%; text-align:center; color:#FFF; font-family:amudham; font-weight:bold; padding:12px 0px;}

.input_set {float:left; width:100%; margin-top:10px;}
.input_name {float:left; width:94%; background:url(../images/keypad.png) top 4px right 10px no-repeat #FFF; padding:7px; font-size:16px; border:none;}
.input_star {float:left; width:94%; background:url(../images/star.png) top 4px right 24px no-repeat #FFF; padding:7px; font-size:16px; border:none; margin-top:4px;}

.amt_content_hd_div {float:left; width:100%; padding:10px 0px;} /*background:#068200;*/
.amt_dollor {float:left; width:auto; color:#FFF; opacity:.2; font-size:24px; margin:6px 0px 0px 10px;}
.amt_total {float:right; width:auto; font-size:24px; color:#FFF; margin:6px 10px 0px 0px; font-weight:bold;}
.amt_close {float:right; width:40px; height:40px; background:url(../images/close.png) no-repeat; background-size:contain; margin-right:10px;}
.amt_content {float:left; width:100%; height:275px; overflow-y:scroll;}
.amt_strip1 {float:left; width:100%; background:rgba(150, 147, 147, 0.12); margin-top:2px;} /*background:#d7fdd4;*/
.amt_strip2 {float:left; width:100%; background:#e4fee3; margin-top:2px;}
.amt_name {float:left; width:65%; border-right:1px solid #FFF; padding:2%;}
.amt_txt {float:right; width:auto; padding:2%;}
.bottom_icon_div {width:89%; padding:5px; text-align:center; font-size:24px; text-transform:uppercase; font-weight:bold; color:#FFF; position:absolute; bottom:0;} /*background:#023001;*/
.bottom_icon1 {float:left; width:46%; height:60px; margin-left:3%; cursor:pointer;}
.bottom_icon1 input {cursor:pointer; float:left; width:100%; height: 60px; border:none; color: #FFF; font-size:24px;} /*background: #068200;*/
.bottom_icon2 {float:left; width:46%; height:60px; margin-left:3%; cursor:pointer;}
.bottom_icon2 input {cursor:pointer; float:left; width:100%; height: 60px; border:none; color: #FFF; font-size:24px;} /*background: #068200;*/

@media screen and (max-width:960px) {
        body {
            overflow-y: auto !important;
        }
	.content_left {width:100%;}
	.content_right {width:100% !important;}
        .input_star {width:96% !important;}
	.events_div_red, .events_div_green, .events_div_skyblue, .events_div_blue {width:26%; margin-top:2%;}
	.archanai_list_div {width:26%;}
        #num-pad {width:100% !important;}
        #num-pad > div {min-width:8% !important;}
}
@media screen and (max-width:768px) {
	.content_left {width:100%;}
	.content_right {width:98%;}
        .bottom_icon_div {width:97%;}
}