﻿
body {
    font-size: large;
    font-family: ‘Roboto’, sans-serif !important;
    color:#004B6B;
    border: none;
    overflow-y: auto; /* Add the ability to scroll */
}


.sop_readonly_fit
{
    cursor:pointer;
    display:inline-block;
    
    border:solid;
    border-color:#004B6B;
    border-width:thin;
    background-color:#f2f2f2;
    color:#004B6B;
    padding:10px;
    box-shadow:none;
     -webkit-appearance: none;
    -moz-appearance: none;
     text-decoration:none;
  
}

.sop_readonly
{
    cursor:pointer;
    display:inline-block;
    font-size:large;
    border:solid;
    border-width:thin;
    background-color:#f2f2f2;
    color:#004B6B;
    padding:10px;
    width:80%;
    box-shadow:none;
     -webkit-appearance: none;
    -moz-appearance: none;
     text-decoration:none;
  
}


.sop_readonly_inverse
{
    cursor:pointer;
    display:inline-block;
    
    border:solid;
    background-color:#004B6B;
    color:white;
    border-radius:10px;
    padding:10px;
    width:80%;
    box-shadow:none;
     -webkit-appearance: none;
    -moz-appearance: none;
     text-decoration:none;
  
}


.sop_label_round {
    font-size: large;
    border: solid;
    border-color: #dddddd;
    border-width: thin;
    background-color: #f2f2f2;
    text-decoration: none;
    border-radius: 30px;
    padding: 15px;
    box-shadow: none;
    width: 80%;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.sop_input_round {
    font-size: large;
    border-width: 1px;
    color: #004B6B;
    display: inline-block;
    border: solid;
    background-color: white;
    text-decoration: none;
    padding: 10px;
    box-shadow: none;
    width: 90%;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: content-box; /* Firefox, other Gecko */
    box-sizing: content-box;
}
.sop_input_line {
    font-size: large;
    color: black;
    display: inline-block;
    border: none;
    border-bottom:solid;
    border-width: 2px;
    background-color: white;
    text-decoration: none;
    padding: 10px;
    box-shadow: none;
    width: 80%;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
}
.sop_dropdown {
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align: center;
    font-size: large;
    color: #004B6B;
    background-color:white;
}
.sop_input_label{
   
    color:#203038;
    
    padding-left:10px;
   
}

.sop_link_btn {
    background-color: #00b6af;
    color: white;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
    font-size: large;
    width: auto;
    display: inline-block;
}
.sop_link_btn:hover {
    color:navy;
}
.sop_link {
    color: #00b6af;
    font-weight: bold;
    font-size: large;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: content-box; /* Firefox, other Gecko */
    box-sizing: content-box;
}
.sop_link:hover {
    color: navy;
}
.sop_input_label_right{
    margin-right:7.5%;
    float:right;
    color:#203038;
     
    padding-right:10px;  
}
.sop_divider {
    width: 80%;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: solid;
    background-color: gray;
    height: 0px;
    border: solid;
    border-width: 1px;
    opacity: 1;
    color: #004B6B;
}

.sop_divider2 {
    width: 90%;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: solid;
    background-color: gray;
    height: 0px;
    border: solid;
    border-width: 1px;
    opacity: 1;
    color: #004B6B;
    ;
}

.sop_button {
    border-radius:35px;
    padding:18px;
    border:none;
    min-width:100px;
    font-weight:normal;
    text-align:center;
    font-size:large;
}
.sop_back_gray  {
    color:#203038;
    background-color:#D5D5D5;
}
.sop_back_blue  {
    color:white;
    background-color:#577280;
}

 .sop_right_blue_button  {
    color:white;
    background-color:#577280;
    float:right;
    margin-right:5%;
}

.sop_left_gray_button {
    color:#203038;
    background-color:#D5D5D5;
    float:left;
    margin-left:5%;
}

.sop_icon {
    height:30px;
    vertical-align:middle;
}


.sop_large_icon {
    height:40px;
    width:40px;
    vertical-align:middle;
}
.sop_center_icon_horiz_bottom {
    width:40px;
  
    position: absolute;
    left: 50%;
    margin-left: -15px;
    bottom:20px;
}

.sop_center_icon_horiz {
    width:40px;
    position: absolute;
    left: 50%;
    margin-left: -15px;
}

.sop_message_confirm {
    font-size:large;
    width: 100px;
    color: #004B6B;
    border: solid;
    border-color: #dddddd;
    border-width: thin;
    background-color: white;
    text-decoration: none;
    border-radius: 10px;
    padding: 10px;
}

.sop_message_confirm_yes {
    font-size: large;
    width: 100px;
    color: #004B6B;
    background-color: #004B6B;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    padding: 10px;
}


.sop_message_confirm_right {
    right:10%;
    bottom:10px;
}
.sop_message_confirm_left {
    left:10%;
    bottom:10px;
}

.sop_center_icon_both {
    width:30px;
    height:30px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
}
.sop_message {
    color:white;
    width:90%;
    height:1000px;
    position: absolute;
    background-color:#004B6B;
    top: 0;
    left: 0; 
     
    z-index:1000;
    border:none;  
    text-align:center;
    padding:5%;
  
}
@keyframes expandFromPoint {
    from {
        transform: scale(0.5);
        opacity: 0.5;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.sop_message_fill {
    display: inline-block;
    font-size: large;
    background-color: #F9F9F9;
    color: #004B6B;
    padding: 10px;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    text-align: left;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    text-align: center;
    overflow-y: scroll;
    transform-origin: center; /* or top left, etc. */
    animation: expandFromPoint 0.5s ease-in-out forwards;
}
.sop_message2 {
    display: inline-block;
    font-size: large;
    background-color: #F9F9F9;
    color: #004B6B;
    padding: 10px;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    text-align: left;
    width: calc(100% - 20px);
    height: calc(100% - 110px);
    position: fixed;
    left: 0;
    top: 90px;
    z-index: 1000;
    text-align: center;
    overflow-y: scroll;
    transform-origin: center; /* or top left, etc. */
    animation: expandFromPoint 0.5s ease-in-out forwards;
}

.sop_message3 {
    display: inline-block;
    font-size: large;
    border: solid;
    border-color: #004B6B;
    border-width: thin;
    background-color: #F9F9F9;
    color: #004B6B;
    border-radius: 10px;
    padding: 10px;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    text-align: left;
    width: 80%;
    max-height: 450px;
    height: auto;
    border: solid;
    position: fixed;
    left: 10%;
    top: 120px;
    margin-left: -12px;
    z-index: 1000;
    text-align: center;
    overflow-y: scroll;
}
.sop_message_fixed {
    display: inline-block;
    font-size: medium;
    border: solid;
    border-color: #004B6B;
    border-width: thin;
    background-color: #E6E6E6;
    color: #004B6B;
    border-radius: 10px;
    padding: 10px;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    text-align: left;
    width: 80%;
    max-height: 450px;
    height: auto;
    border: solid;
    position: fixed;
    top: 120px;
    left: 10%;
    margin-left: -12px;
    z-index: 1000;
    text-align: center;
    overflow-y: scroll;
}
.sopStatsButton {
    border: solid;
    width: 200px;
    padding: 10px;
    background-color:#004B6B;
    color: white;
    cursor: pointer;
}
.sopStatsButton2{
    border:solid;
    color:#004B6B;
    width:200px;
    padding:10px;
}
.sop_logo {
    width: 200px;
    border-radius: 10px;
    border-width:3px;
    border-color: #E6E6E6;
}

.fixed_bottom_right
{
    position:fixed;
    bottom:60px;
    right:20px;
    z-index:200;
}

.fixed_bottom_right_low {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
}
.fixed_bottom_left
{
    position:fixed;
    bottom:20px;
    left:20px;
    z-index:200;
}

.fixed_bottom
{
    position:fixed;
    bottom:20px;
    z-index:1000;
}
a {
    color: #00b6af;
    font-weight: bold;
    cursor: pointer;
    border-color: gray;
    border-width: thin;
    border-radius: 10px;
}
.container .content {
    display: none;
    padding : 5px;
    
    border-style:ridge;
}

.menuButton
{
	display:inline-block;
    cursor:pointer;
    background-color:white;
    width:100px;
    height:100px;
    border:solid;
    box-shadow: 0px 0px lightgrey;
    border-width:1px;
    border-radius:10px;
    font-weight:normal;
    margin:5px;
}

.menuButtonSmall
{
	display:inline-block;
    background-color:white;
    width:80px;
    height:80px;
    border:solid;
    box-shadow: 0px 0px lightgrey;
    cursor:pointer;
    border-width:1px;
    border-radius:10px;
    font-weight:normal;
   
}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:0px 0px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}

.image{
  
    cursor: pointer;
   

}
.homeBody {
   
   background-size: 100% 100%;
   background-color:white;
   background-position:center;
   opacity:5;
  background-repeat: no-repeat;
  
}

.mainbigbuttonwhite {
    width:45%;background-color:white;border:solid;border-color:gray;vertical-align:middle;height:150px;font-size:large;cursor:pointer;border-width:thin;font-weight:bold;
}
.mainbigbuttongray {
    width:45%;background-color:lightgray;border:solid;border-color:gray;vertical-align:middle;height:150px;font-size:large;cursor:pointer;border-width:thin;font-weight:bold;
}

.sopbutton {
    width: 80%;
    font-size: large;
    background-color: #ECEBEB;
    padding: 15px;
    display: inline-block;
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-align: center;
}
.sopbutton:hover {
    border: solid;
    border-width: thick;
    border-color: #004B6B;
}
.sopbuttongreen {
    width: 80%;
    font-size:large;
    background-color: #004B6B;
    padding: 15px;
    display: inline-block;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-align: center;
}
    .sopbuttongreen:hover {
        border: solid;
        border-width: thick;
        border-color: #ECEBEB;
    }
.sopsubmitgray {
    cursor: pointer;
    display: inline-block;
    border-radius: 35px;
    padding: 15px;
    min-width: 100px;
    font-weight: bold;
    text-align: center;
    font-size: large;
    color: #004B6B;
    border: none;
    text-decoration: none;
    background-color: #E2E2E2;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.sopsubmitgray:hover {
    border: solid;
    border-width: thick;
    border-color: #004B6B;
}
.sopsubmittransparent {
    cursor: pointer;
    display: inline-block;
    border-radius: 35px;
    padding: 15px;
    min-width: 100px;
    font-weight: bold;
    text-align: center;
    font-size: large;
    color: #004B6B;
    border: none;
    text-decoration: none;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.sopsubmit {
    cursor: pointer;
    display: inline-block;
    border-radius: 35px;
    padding: 15px;
    background-color: #004B6B;
    min-width: 100px;
    font-weight: normal;
    text-align: center;
    font-size: large;
    color: white;
    font-weight: bold;
    border:none;
    text-decoration:none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.mapsavebutton {
    font-size:50px;
    background-image:linear-gradient(to right, #B5FBB6, green);
    padding:10px;
    color: white;
    border-radius:10px;
}
.mapdeletebutton {
    font-size: 50px;
    background-image: linear-gradient(to right, #D0D0D0, black);
    padding: 10px;
    color: white;
    border-radius: 10px;
}
.sopbutton4
{
   
    background-color:white;
    
    border-radius:10px;
    border:solid;
    padding:5px;
    text-decoration:none;
    border-color:#00a2e8;
    cursor:pointer;
    text-align:center;
    min-width:70px;
    
}
.sopchkbox input {width:25px; height:25px;}
.soplink{
    font-size:x-large;
}

.sopinput {
    font-size: large;
    border-width: 1px;
    color: #004B6B;
    display: inline-block;
    border: solid;
    background-color: white;
    text-decoration: none;
    padding: 10px;
    box-shadow: none;
    width: 90%;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: content-box; /* Firefox, other Gecko */
    box-sizing: content-box;
}

.sopinputold
{
	font-size:large;
    border:none;
    border-bottom:solid;
    border-width:thin;
    background-color:transparent;
	
}
.sopinput2
{
	font-size:large;
    border-radius:10px;
    background-color:white;
    border:solid;
    border-color:#00a2e8;
    border-radius:20px;
    height:40px;
    padding:5px;
    border-width:thin;
	
}

div
{
	padding: 0px;
    margin: 0px; 
    border:none;   
    font-size:large;
    cursor:pointer;
}
.button {
    display: inline-block;
    padding: 5px;
    font-weight:bold;
    text-align: center;
    text-decoration: none;
    background-color:green;
    color: white;
    border-width:1px;
    border-radius:0px;
    border: none;
    cursor: pointer;
}


.table-scroll {
	position:relative;
	max-width:100%;
	margin:auto;
	
	
}
.table-wrap {
	width:100%;
	overflow:auto;
}
.table-scroll table {
	width:100%;
	margin:auto;
	border-collapse:separate;
	border-spacing:0;
}
.table-scroll th, .table-scroll td {
	
	
	background:#fff;
	white-space:nowrap;
	vertical-align:top;
    
}
.table-scroll thead, .table-scroll tfoot {
	background:#f9f9f9;
}
.clone {
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
}
.clone th, .clone td {
	visibility:hidden
}
.clone td, .clone th {
	border-color:transparent
}
.clone tbody th {
	visibility:visible;
	color:red;
}
.clone .fixed-side {
	
	background:#eee;
	visibility:visible;
}
.clone thead, .clone tfoot{background:transparent;}

html {height: 100%; width:100%;}
body {height: 100%; width:100%; margin: 0; padding: 0;}
form {height: 100%; width:100%; margin: 0; padding: 0;}
#map {height: 100%; width:100%; }

 .animated {
         background-image: url(/css/images/logo-144x144.png);
         background-repeat: no-repeat;
         background-position: left top;
         padding-top:95px;
         margin-bottom:60px;
         -webkit-animation-duration: 10s;
         animation-duration: 1s;
         -webkit-animation-fill-mode: both;
         animation-fill-mode: both;
     }
         
         @-webkit-keyframes fadeIn {
         0% {opacity: 0;}
     100% {opacity: 1;}
     }
         
         @keyframes fadeIn {
         0% {opacity: 0;}
     100% {opacity: 1;}
     }
         
         .fadeIn {
         -webkit-animation-name: fadeIn;
         animation-name: fadeIn;
     }


.image_rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
}

.sopalert {
    background-color : red;
    color:white;
    font-size:x-large;
    border-radius:10px;
    height:100px;
    width:95%;
    vertical-align:middle;
    text-align:center;
}


.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
  text-align:center;
}

.alert.success {background-color: #4CAF50;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
  margin-left: 15px;
  color: white;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
 
}

.yesbutton{
    border:none;
    background-color:green;
    color:white;
    padding:10px;
    border-radius:10px;
}
.nobutton{
    border:none;
    background-color:red;
    color:white;
    padding:10px;
    border-radius:10px;
}

label {
    cursor: pointer;
    font-size: 20px;
}
span {
    cursor: pointer;
    font-size: medium;
}

.sopalert2
{
    position:absolute;
    top:0;
    left:0;
    background-color:#00a2e8;
    border:solid;
    color:white;
    width:100%;
    text-align:center;
    padding-bottom:10px;
    padding-top:10px;
}
.sopMenuItem {
    vertical-align: middle;
    display: inline-block;
    font-size: 30px;
}

.sopMenuItemBG {
    background-color: #004B6B;
    
    padding: 10px;
    color: white;
    display: inline-block;
    vertical-align: middle;
}

.sopMenuItemBGSmall {
    /*background-image: linear-gradient(to right, #ff9d9d, #ff7000);*/
    background-color: #004B6B;
    padding: 5px;
    color: white;
    display: inline-block;
    vertical-align: middle;
}
.sopMenuItemBGSmallGray {
    /*background-image: linear-gradient(to right, #ff9d9d, #ff7000);*/
    background-color: #f2f2f2;
    border-radius: 5px;
    padding: 5px;
    display: inline-block;
    vertical-align: middle;
}

.sopLabel {
    text-align: center;
    z-index: 2;
    position: fixed;
    top: 50px;
    padding-top: 0px;
    padding-bottom: 15px;
    left: 0px;
    width: 100%;
    vertical-align: middle;
    background-color: #004B6B;
    font-size: large;
    font-weight: bold;
    color: white;
    display: inline-block;
}
.sopShare {
    position:fixed;
    right: 5px;
    bottom: 5px;
    width: 25px;
    height: 25px;
    cursor:pointer;
 
}
.sopTitle{
    width:85px;
    height:61px;
}

img {
    cursor: pointer;
   
}
input[type=checkbox]{
    width:30px;
    height:30px;
}

.searchBox {
    text-align:left;
    width:80%;
    position:fixed;
    z-index:100;
    bottom:10px;
    left:10%;
    margin-left:-12px;
    background-color:white;
    display:inline-block;
}
.loaderCircle {
    border: 10px solid #EDEDED; /* Light grey */
    border-top: 10px solid green; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}
.loader {
  width: 200px;
  z-index:2000;
  animation: spin 5s linear infinite;
  -webkit-animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
 
}
@keyframes spin {
    0%          { transform:rotate(0deg); }
    50%         { transform:rotate(180deg); }
    100%        { transform:rotate(360deg); }
}

@-webkit-keyframes spin {
    0%          { -webkit-transform:rotate(0deg); }
    50%         { -webkit-transform:rotate(180deg); }
    100%        { -webkit-transform:rotate(360deg); }
}

@-moz-keyframes spin {
    0%          { -moz-transform:rotate(0deg); }    
    50%         { -moz-transform:rotate(180deg); }
    100%        { -moz-transform:rotate(360deg); }
}

.sopActionPanel {
   background-color:white;
   width:100%;
   position:fixed;
   bottom:0px;
   height:50px;
   border:none;
   border-width:thin;
   border-color:gray;
   
}

.sopCenterActionPanel {
   background-color:white;
   width:100%;
   position:fixed;
   bottom:0px;
   height:50px;
   border:none;
   border-width:thin;
   border-color:gray;
   text-align:center;
   padding-top:10px;
   padding-bottom:10px;
   
}
.sopActionButton {
    width:25px;
    height:25px;
    padding:0px;
}


.sopMediumActionButton {
    width:50px;
    height:50px;
  
}

.sopCenter {
    top: 50%;
    margin-top:-30px;
    position:fixed;
    left: 50%;
    margin-left:-30px;
}

.prayer_back_gradient{
    background: #47C2F1; /* Old browsers */
		background: -moz-linear-gradient(top,  #47C2F1 0%, #009DDA 76%, #009DDA 100%, #7DB9E8 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #47C2F1 0%,#009DDA 76%,#009DDA 100%,#7DB9E8 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #47C2F1 0%,#009DDA 76%,#009DDA 100%,#7DB9E8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#47C2F1’, endColorstr=‘#7DB9E8’,GradientType=0 ); /* IE6-9 */
}


/* CSS for page transitions */
.fade-page {
    animation: fadeIn 0.2s forwards;
}

.fade-page-out {
    animation: fadeOut 0.5s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
.btn-grad {
    color: #004B6B;
    font-weight: bold;
    background-color: white;
    background-image: none;
    margin: 10px;
    padding: 20px 20px;
    text-align: center;
    border: solid;
    display: inline-block;
    border-radius: 50px;
    width: 90%;
    font-size: x-large;
}

.btn-grad:hover {
    background-image: none;
    background-color: #004B6B; /* Lighter navy on hover */
    border-color: #999;
    color: white;
    cursor: pointer;
    border-color: lightgray;
}

.btn-grad-sm {
    color: #004B6B;
    font-weight: normal;
    background-color: white;
    background-image: none;
    margin: 10px;
    padding: 5px 5px;
    text-align: center;
    border: solid;
    border-color: lightgray;
    display: inline-block;
    border-radius: 50px;
    width: 300px;
    font-size: x-large;
}

.btn-grad-sm:hover {
    background-image: none;
    background-color: #004B6B; /* Lighter navy on hover */
    border-color: #999;
    color: white;
    cursor: pointer;
    border-color: lightgray;
}
.sop_pray_item_old {
    border-bottom: solid;
    border-color: #F1ECEC;
    border-width: 2px;
    background-color: transparent;
    color: #004B6B;
    text-decoration: none;
    border-radius: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: none;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
}


.sop_pray_item {
    color: #5433FF;
    font-size: x-large;
    padding: 10px;
    background-color: #DBD4FF;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    display:inline-block;
    width:90%;
}

.sop_pray_item:hover {
    border:solid;
    border-color:currentColor;
}


.sop_button_gray {
    color: #004B6B;
    font-size: x-large;
    padding: 10px;
    background-color: #f2f2f2;
    border-radius: 10px;
    text-align: left;
    text-align-last: left;
    cursor: pointer;
    display: inline-block;
    width: 90%;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: content-box; /* Firefox, other Gecko */
    box-sizing: content-box;
}

.sop_button_gray:hover {
    border: solid;
    border-color: currentColor;
}

.sop_button_orange {
    color: #BD6500;
    font-size: x-large;
    padding: 10px;
    background-color: #FFE6CC;
    border-radius: 10px;
    text-align: left;
    text-align-last: left;
    cursor: pointer;
    display: inline-block;
    font-weight: normal;
    width: 90%;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: content-box; /* Firefox, other Gecko */
    box-sizing: content-box;
}

.sop_button_orange:hover {
    border: solid;
    border-color: currentColor;
}
.sop_button_green {
    color: green;
    font-size: x-large;
    padding: 10px;
    background-color: #E4FFD6;
    border-radius: 10px;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    width: 90%;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: content-box; /* Firefox, other Gecko */
    box-sizing: content-box;
}

    .sop_button_green:hover {
        border: solid;
        border-color: currentColor;
    }
.sop_button_red {
    color: red;
    font-size: x-large;
    padding: 10px;
    background-color: #FFBDBD;
    border-radius: 10px;
    text-align: left;
    text-align-last: left;
    cursor: pointer;
    display: inline-block;
    width: 90%;
    font-weight:normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: content-box; /* Firefox, other Gecko */
    box-sizing: content-box;
}

    .sop_button_red:hover {
        border: solid;
        border-color: currentColor;
    }

.sop_button_purple {
    color: #5433FF;
    font-size: x-large;
    padding: 10px;
    background-color: #DBD4FF;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    display: inline-block;
    width: 90%;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: content-box; /* Firefox, other Gecko */
    box-sizing: content-box;
}

.sop_button_purple:hover {
    border: solid;
    border-color: currentColor;
}

.sop_button_blue {
    color: #0062FF;
    font-size: x-large;
    padding: 10px;
    background-color: #9EE3FF;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    display: inline-block;
    width: 90%;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-decoration: none;
    -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: content-box; /* Firefox, other Gecko */
    box-sizing: content-box;
}

    .sop_button_blue:hover {
        border: solid;
        border-color: currentColor;
    }
