/** Church related css*/


/** Priest Profile cards - select priest */

.profile_pic {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 75px;
}

#all-selected-priest-profiles {
    display: flex;
    flex-wrap: wrap;
}

.profile_card .flex.flex-center {
    margin: 0;
    padding: 0;
}

.profile_card {
    border-radius: 20px;
    width: 250px;
    padding: 20px 30px;
    justify-content: center;
    align-items: center;
    margin: 30px;
}

.profile_card {
    border-radius: 20px;
    width: 250px;
    padding: 20px 30px;
    justify-content: center;
    align-items: center;
    margin: 30px;
}

.profile_card .priest_name {
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
}

.selected-priest a {
    text-decoration: none;
    color: white;
}

.priest_name p {
    margin: 0;
}

.priest_organization p {
    text-align: center;
}

.profile_card {
    display: block;
    top: 0;
    position: relative;
    max-width: 262px;
    background-color: #f2f8f9;
    padding: 32px 24px;
    margin: 12px;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid #f2f8f9;
}

.profile_card:hover {
    border: 1px solid #00838d;
    transition: .5s linear;
}

.selection {
    background: #00ac90;
    color: white;
}

.selected-priest {
    background: rgb(142, 162, 142);
    color: white;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.selected-priest div {
    padding: 5px;
}

.selected-priest .close p {
    margin: 0;
    padding: 0;
}

.selected-priest p {
    margin: 0;
}

.all-selected-priests {
    margin-top: 10px;
    background: green;
    justify-content: space-between;
    display: flex;
}

.selected-priest:hover {
    background: rgb(141, 187, 141);
    cursor: pointer;
}


#add-congregation-button {
    position: relative;
    top: 25px;
}

#priest-congregation {
    align-items: center;
}

#send-invitation-top-block-of-form {
    background: #00ac90;
    padding: 5px;
}

#send-invitation-top-block-of-form span {
    color: white;
}

.navbar-fixed {
    height: 44px;
}

/** Blizz margins and paddings*/


.bz-padding {
    padding: 10px;
}

.bz-margin {
    margin: 10px;
}

.bz-margin-top{margin-top:10px;}
.bz-margin-bottom{margin-bottom:10px;}

.bz-content-70 {
    width: 70vw;
}

.bz-card-info {
    max-width: 60vw;
    padding: 20px;
    color: #555555;
    background: rgba(0, 21, 172, 0.04);
}

.remove-margin-padding {
    margin: 0;
    padding: 0;
}

.flex.flex-center {
    justify-content: center;
}


.text-center {
    text-align: center
}

.text-capitalize {
    text-transform: capitalize
}

.flex.flex-around {
    justify-content: space-around;
}

#help-bottom {
    padding: 20px;
}

.bz-heading-medium {
    font-size: 18px;
    font-weight: 600;
}

.bz-heading-small {
    font-size: 16px;
    font-weight: 600;
}

.bz-heading-large {
    font-size: 22px;
}

.flex-space-between {
    justify-content: space-between;
}

.flex-fill {
    flex-grow: 1
}

.flex-v-center {
    align-items: center;
}

.flex-space-around {
    justify-content: space-around;
}

.svg-background {
    width: 100vw;
    min-height: 93vh;
    background-image: url("/img/vector-background.svg");
}


.bz-heading-medium {
    font-size: 18px;
    font-weight: 600;
}

.bz-heading-small {
    font-size: 16px;
    font-weight: 600;
}

.bz-heading-large {
    font-size: 22px;
}

/** Fonts */

.opensans{
    font-family: 'Nunito Sans', sans-serif;
}

/** Splash Messages */

.short-messages {
    background: black;
    color: white;
    padding: 10px 20px;
}

/** Buttons for Dashboard */
/**88888888888888888888888*/

.oval-button {
    border: 1px solid #333333;
    color: #333;
    padding: 9px 25px;
    margin: 4px 5px;
    border-radius: 28px;
    cursor: pointer;
    white-space: nowrap;
}

.oval-button:hover {
    text-decoration: none;
    background: #333;
    color: white;
    transition: 300ms;
}

/** Apply the below colors to the above buttons*/

.db-blue.oval-button {
    color: rgb(40, 171, 227);
    border: 1px solid #28abe3;
}

.db-blue.oval-button:hover {
    color: white;
    background: #28abe3;
}


.db-blizz.oval-button {
    color: #00ac90;
    border: 1px solid #00ac90;
}

.db-blizz.oval-button:hover {
    color: white;
    background: #00ac90;
}

.db-transparent{
    background: #ffffff40;
}
.db-transparent.oval-button{
    border:none;
    color:white;
}


.db-button {
    border: 1px solid #333333;
    color: #333;
    padding: 9px 25px;
    margin: 4px 5px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
}

.db-button:hover {
    text-decoration: none;
    background: #333;
    color: white;
    transition: 300ms;
}



/*------------------------*/


/* Multi step form */
.multistep-form {
    display: flex;
    justify-content: space-around;
    padding: 10px;
}

.multistep-form .circle {
    padding: 7px 15px;
    border: 1px solid #777;
    background: #c9d5d3;
    color: white;
    font-weight: 700;
    border-radius: 33px;
}

.multistep-form .circle p {
    margin: 0;
    padding: 0;
}

.multistep-form .circle.reached {
    background: #00ac90;
}

.center-line {
    position: relative;
    border: 1px dotted #777777;
    top: -77px;
    z-index: -1;
}

.multistep-form .flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*---------------------------*/


#user-actions {
    background: white;
    color: black;
    margin-right: 5px;
}

/* Bread Crumb */
.breadcrumb-header {
    color: #00ac90;
    font-size: 15px;
    font-weight: 700;
    margin-right: 20px;
}

ul.breadcrumbs a {
    display: inline;
}

ul.breadcrumbs {
    padding: 0 10px;
    list-style: none;

    margin: 0;
}

ul.breadcrumbs li {
    display: inline;
    font-size: 12px;

    padding: 2px 4px;

}

ul.breadcrumbs li + li:before {
    padding: 2px;
    color: white;
    content: ">>";
}

ul.breadcrumbs li a {
    color: #f6ffea;
    font-weight: 600;
    text-decoration: none;
}

ul.breadcrumbs li a:hover {
    color: #00ffe2;
    text-decoration: none;
}


/* Blizz Form helper */


.clone-btn {
    background: white;
    padding: 2px;
    font-size: 10px;
    cursor: pointer;
    border: 1px solid #00ac90;
}

.delete-clone-btn {
    background: white;
    padding: 2px;
    font-size: 10px;
    cursor: pointer;
    border: 1px solid red;
    color: red;
    margin-left: 10px;
}

/* form errors and form styling */

.highlighted-input {
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(42, 84, 168, 0.727);
    transition: box-shadow .18s ease, transform .12s ease;
    padding: 10px 12px;
}

.highlighted-input.chapter{
    box-shadow: 0 1px 2px rgba(232, 40, 43, 0.929);
}

.highlighted-input.start-end-verse{
    box-shadow: 0 1px 2px rgba(40, 232, 110, 0.929);
}

.chapter-details{width:80vw;}

.chapter-details fieldset{margin-bottom: 30px;}


form ul {
    list-style-type: none;
    padding: 0;
}

form ul li {
    color: red;
    font-size: 10px;
}

.blizz-margin-top-bottom {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Token select select2*/
.select2 ul li {
    font-size: 15px;
}

.select2-container {
    margin-bottom: 20px;
}

.select2-container .select2-selection--multiple {
    border-radius: 0;
    border: 1px solid #cccccc;
}

.select2-container.form-select {
    padding: 0px;
    margin: 20px 0px;
}



.error-hide {
    display: none;
}

.has-error {
    color: white;
    background: rgba(255, 0, 0, 0.5);
    padding: 12px;
    display: flex;
    font-size: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
}


.primary-green-background {
    background: #00ac90;
}

.primary-foreground-white {
    color: white;
}

.bold-text {
    font-weight: 700;
}

.pointer {
    cursor: pointer;
}

.section-seperator {
    background: grey;
    opacity: 0.2;
    height: 7px;
    border-radius: 3px;
    display: block;
    width: 100%;
    margin: 10px 0 0;
}

/* dashboard admin search */
#empty_search_text {
    cursor: pointer;
}

.color-dashboard-background {
    background: #f4fbf4;
}

.rounded-flat-card{
    background:white;
    padding:10px;
    margin:4px;
    border-radius: 30px;
}

.card {
    background: #f8fff8
}

.card .card-content{padding:14px}



.transparent-white {
    background: #ffffff90;
    border-radius: 8px;
}

.logout {
    font-size: 10px;
    text-decoration: none;
    cursor: pointer;
}

/* select2 */
.select2-dropdown {
    max-height: 200px;
    overflow-y: auto;
}

/* Sacraments & Church */

#view-location .card {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 15px;
    margin: 5px;
}

#view-location .location-address {
    word-break: break-word;
    max-width: 400px;
}


#view-location .flat-button {
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.4);
    color: white;
    margin: 3px;
}

#view-location .flat-button:hover {
    background: white;
    color: black;
    transition-duration: 0.5s;
}

#view-location .fa {
    margin: 0 3px;
}


.location .address p {
    margin: 0
}

.top {
    background: #00ac90;
    color: white
}

.map {
    width: 400px;
    height: 300px;
    background: rgb(105, 105, 79);
}

.flex {
    display: flex;
}

.flex-space-between {
    justify-content: space-between
}

.flex-around {
    justify-content: space-around
}


.flex-column {
    flex-direction: column
}

.left {
    display: flex;
}

.sacrament-card .valign {
    flex-direction: column;
    align-items: center;
}

.sacrament-card .sacrament-icon {
    font-size: 30px;
}

.sarament-card .details {
    font-size: 15px;
    color: red;
}

.sacrament-card {
    margin: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.sacrament-card h6 {
    color: rgb(68, 68, 68);
}

.sacrament-card .bottom {
    border-top: 1px solid #eee;
    padding: 5px 10px;
    display: flex;
    justify-content: flex-end;
}

.bottom a span {
    margin-left: 5px;
}

#googleMap {
    border: 1px solid grey;
    border-radius: 4px;
}

.spaced > * {
    margin-right: 20px;
}

.heading i {
    color: #00836b;
    margin-left: 10px;
}

.sacrament-card .timings {
    font-size: 11px;
    margin: 10px;
    margin-top: 20px;
}


.heading {
    border-bottom: 1px solid rgba(128, 128, 128, 0.22);
    display: flex;
    align-items: center;

}

.heading span {
    color: #00836b;
    font-weight: 800;
}


#pac-input {
    margin-top: 10px;
    height: 30px;
    border-radius: 4px;
    width: 345px;
    background: white;
    padding: 4px;
}

/* Duplicate List */
#duplicates_found_heading {
    font-weight: 600;
    margin-bottom: 20px;
}

.one_duplicate {
    display: flex;
    justify-content: space-between;
    background: orange;
    border-bottom: 1px dotted white;
    padding: 5px 10px;
    color: white;
}

.one_duplicate p {
    margin: 0;
}

#add-edit-location .flat-button {
    padding: 10px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.4);
    color: white;
    margin: 3px;
}

#add-edit-location .flat-button:hover {
    background: white;
    color: black;
    transition-duration: 0.5s;
}


/* Timing Add - Edit  Location */

.one_time {
    background: rgb(140, 140, 234);
    color: white;
    border: 1px solid grey;
    border-radius: 30px;
    padding: 0 10px;
    margin: 5px 10px;
}

.one_time p {
    margin: 0;
}

.one_time > * {
    margin: 10px;
}

.close_time {
    padding: 0 7px;
    background: rgb(103, 82, 231);
    border-radius: 15px;
    cursor: pointer;
}

.one_time:hover {
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.8);
    transition: box-shadow 0.3s ease-in-out;
}

#ps_queued .ps {

    background: #ffcf78;
    color: #332828;
    padding: 10px;
    border-radius: 10px;
    margin: 5px;
}

.new-timing {
    background: #d0f9d0;
}

#days-category > * {
    margin-right: 15px;
}

#result_container {
    padding: 5px;
    position: fixed;
    width: 22%;
    min-height: 300px;
    background: white;
    left: 75%;
    top: 13%;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease-in-out;
    border: 1px solid grey;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#result_container p {
    text-align: center;
    font-weight: 700;
    margin-bottom: 50px;
}

/* Login page */
#rose {
    left: 0;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;

}

#rose1, #rose2 {
    left: 0;
    color: white;
    position: relative;
    -webkit-animation-name: another; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: another;
    animation-duration: 4s;

}


@-webkit-keyframes example {
    0% {
        left: 200px;
    }
    100% {
        left: 0;
    }
}

/* Standard syntax */
@-webkit-keyframes another {
    0% {
        left: 400px;
    }
    100% {
        left: 0;
    }
}


.grid-group {
    border: 2px solid #fff;
    margin: 8px;
    display: flex;
    flex: 1;
}

.grid-cell {
    border: 2px solid #fff;
    margin: 8px;
    min-width: 0;
    flex: 1;
}

/* Sticky Header */
.header {
    padding: 10px 30px;
    color: #414a2c;
    font-weight: 700;
}

.line {
    width: 100%;
    border: 1px solid #0f0f0f;
}

.mobile-menu-icon:hover {
    cursor: pointer;
}

.main-menu-item {
    color: #606060;
    background: rgba(255, 255, 255, 0.3);
    padding: 4px 15px;
    margin: 2px 4px 0;
    justify-content: space-between;
    cursor: pointer;
}

.main-menu {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: width 2s;
    top: 40px;
    transition: width 0.5s;
    padding-top: 3px;
    margin: 0px;
    width: 250px;
    height: 100vh;
    position: fixed;
    background: rgba(0, 0, 0, 0.1);
}

.main-menu {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

.main-menu::-webkit-scrollbar {
    width: 0 !important
}


.appuser-menu i {
    margin-left: 10px;
    padding: 0;
    position: relative;
    top: -10px;
    height: 20px;
}

tr ul {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

tr ul::-webkit-scrollbar {
    width: 0 !important
}

.main-menu-item * {
    margin: 4px;
}

.main-menu-item i {
    width: 40px;
}

.main-menu-item div, i {
    display: flex;
}

.menu-notification-text {
    border-radius: 10px;
    background: #00ac90;
    font-size: 11px;
    padding: 2px 5px;
    color: white;
    font-weight: 400;
}

.menu-notification-text {
    font-size: 11px;
    padding: 2px 4px;
}

.main-menu-item:hover {
    background: #eee;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.menu-seperator {
    background: #ddd;
    height: 1px;
    margin: 5px 0;
}

.menu-section-header {
    margin: 25px 10px 0 0;
}

.menu-section-header * {
    margin: 2px 4px;
    color: #aaa;
    display: flex;
    justify-content: left;
    padding: 0 22px;
    font-size: 12px;
}

.menu-section-header span {
    text-transform: uppercase;
}

.menu-content::-webkit-scrollbar {
    width: 0 !important;
}


.stat-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    color: white;
    border-radius: 3px;
}

.stat-value {
    font-size: 20px;
}

.stat-card p {
    margin: 0;
}

#new-users-stat {
    background: #DE161C
}

#total-users-stat {
    background: #B5402D
}

#videos-uploaded {
    background: #00AB8E
}

#edits-pending {
    background: #1C3645
}

#videos-shared {
    background: #1694DE
}


@media screen and (min-width: 0) and (max-width: 990px) {


    /**
       make the result container of add-timing.phtml to show in the form itself
       instead of having a fixed position and width
     */
    #result_container {
        position: revert;
        width: auto;
    }

    .map {
        width: 75vw
    }

    /** hide name on nav bar*/
    #name-of-user {
        color: white
    }
}

#name-of-user {
    color: black;
    padding-right: 10px;
}

/* --Below is from content.css */


#loading {
    display: none;
}

#loading img {
    width: 20%;
    height: 20%;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.flex-v-center {
    align-items: center
}


/*.h1, h1 {
    color:#a39696;
}*/


.td {
    display: table-cell;
    vertical-align: middle;
}

input, #searchbutton {
    font-family: Nunito;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: transparent;
}


/*#searchbox {
    width:100%;
    font-size:30px;
    line-height:1;
}*/
#brain-icon {
    cursor: pointer;
    display: none;
}

#s-cover {
    width: 1px;
    padding-left: 35px;
}

#searchbutton {
    position: relative;
    display: block;
    width: 84px;
    height: 96px;
    cursor: pointer;
}

#s-circle {
    position: relative;
    top: -8px;
    left: 0;
    width: 32px;
    height: 32px;
    margin-top: 0;
    border: 5px solid #fff;
    background-color: transparent;
    border-radius: 75%;
    transition: 0.5s ease all;
}

#searchbutton span {
    position: absolute;
    top: 50px;
    left: 10px;
    display: block;
    width: 45px;
    height: 10px;
    background-color: transparent;
    border-radius: 10px;
    transform: rotateZ(52deg);
    transition: 0.5s ease all;
}

#searchbutton span:before, #searchbutton span:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 45px;
    height: 15px;
    background-color: #fff;
    border-radius: 10px;
    transform: rotateZ(0);
    transition: 0.5s ease all;
}

#s-cover:hover #s-circle {
    top: -1px;
    width: 67px;
    height: 15px;
    border-width: 0;
    background-color: #fff;
    border-radius: 20px;
}

#s-cover:hover span {
    top: 50%;
    left: 56px;
    width: 25px;
    margin-top: -9px;
    transform: rotateZ(0);
}

#s-cover:hover button span:before {
    bottom: 11px;
    transform: rotateZ(52deg);
}

#s-cover:hover button span:after {
    bottom: -11px;
    transform: rotateZ(-52deg);
}

#s-cover:hover button span:before, #s-cover:hover button span:after {
    right: -6px;
    width: 40px;
    background-color: #fff;
}

#inspect {
    background: rgb(23, 158, 218);
    display: none;
    padding: 10px;
    flex-grow: 1;
    border-radius: 10px;
}

#close-inspect {
    cursor: pointer;
    color: floralwhite;
    font-weight: 500;
    padding: 5px;
}

.link {
    font-weight: 800;
    color: rgb(255, 246, 102);
    margin-top: 20px;
}

.link:hover {
    text-decoration: none;
    color: #fff;
}

#inspect > div {
    display: flex;
    flex-direction: column;
}

.collapsable {
    color: white;
}

#video-results {
    margin-top: 30px;
    display: flex;
    width: 100%;

    flex-wrap: wrap;
}


/** configurations*/

.config-detail {
    max-width: 200px;
    font-size: 10px;
    word-break: break-word;
    padding-top: 15px;
}

/*.one-video-result {
    background:#607d8b36;
    padding:4px;margin:4px;
    border-radius:10px;
    cursor:pointer;
}

.one-video-result p {
    margin:0;
    padding:4px;
}

.one-video-result .video-name {
    color:rgb(173,12,12);
    font-weight:600;
}

.video-tags{
    background:#eee;
    color: #119ce4;font-size:10px;
    padding:4px;border-radius:4px;
}*/

/* Video Folder */
.folder {
    border-radius: 5px;
    margin: 0 10px;
}

.folder-page-header {
    width: 90vw;
    align-items: center;
    background: #707070;
    color: white;
    border-radius: 5px;
    height: 60px;
    display: flex;
    justify-content: space-between;
}

.folder-page-header input {
    background: white;
}

.folder-name {
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 0;
    margin-top: 0;
    max-width: 100px;
    text-align: center;
    text-transform: capitalize;
}

.folder-video-count {
    font-size: 10px;
}

.folder-language-header p {
    font-weight: 800;
    padding: 20px;
    border-bottom: 1px solid rgb(154, 244, 154);
}

.folder:link {
    text-decoration: none;
    color: black;
}

.folder:hover {
    color: #00ac90;
    box-shadow: 0 0 0 2px #e1e9d5;

}

.live-icon {
    background: red;
    color: white;
    font-weight: 700;
}

.live-icon p {
    margin: 0;
}

.live-date {
    padding: 4px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.live-date p {
    margin: 0;
    font-size: 8px;
}

.flex.live-dates {
    border: 1px dotted black;
    border-radius: 5px;
}

/** Video Folder Calendar */
.calendar p {
    margin: 0;
}

#green-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    padding: 10px 30px;
    background: #2ecc70;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#day-selected-text {
    text-align: center;
    font-size: 30px;
    position: relative;
    top: -50px;
}

#day-selected-big {
    font-size: 100px;
    font-weight: 700;
    text-align: center;
}

#year p {
    font-size: 20px;
    color: rgb(189, 191, 189);
    font-weight: 700;
}

.month {
    font-weight: 700;
    color: rgb(137, 142, 136);
    margin: 4px 5px;
    border-radius: 4px;
}

#months {
    border-bottom: 1px dotted black;
}

.day {
    margin: 2px 5px;
    font-size: 8px;
    text-transform: uppercase;
    font-weight: 700;
}

#days {
    display: flex;
    justify-content: space-around;
}

#year {
    display: flex;
    justify-content: flex-end;
}

#month-details {
    padding: 10px 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 1px dotted black;
}

#months {
    display: flex;
    justify-content: space-around;
}

.inactive span {
    color: rgb(204, 202, 202);
}

/** TODO:modify calendar so as to work with active-calendar class instead of active class */

.active-calendar:hover {
    background: #2ecc70;
    color: white;
    cursor: pointer;
}

.selected {
    background: #2ecc70;
    color: white;
}

#calendar {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 20px;
}

#calendar:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

#year p {
    margin: 0;
}

.next-previous {
    padding: 10px;
}

.number-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75px;
    border: 1px dotted black;
    min-height: 50px;
}


.circle-div {

    border-radius: 25px;
    width: 25px;
    display: flex;
    margin-top: 10px;
    justify-content: center;
}


.circle-div.live-folder-date {
    background: #efe51e;
    color: black;

}

.calendar-items {
    display: flex;
    flex-direction: column;
    font-size: 8px;
}

.calendar-items span {
    text-align: center;
    padding: 1px 4px;
    background: rgb(7, 7, 68);
    color: white;
    border-radius: 2px;
    margin: 2px;
}


.form-check > input {
    width: 20px;
}

.form-check > label {
    font-size: 14px;
    color: #00ac90;

}

.language-card-yt * {
    text-transform: capitalize;
    font-size: 14px;
    margin: 17px;
    word-break: break-word;
    color: #938d8d;
}

.card-yt {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    margin: 10px;
    border-radius: 2px;
    max-width: 300px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-yt:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.video-name-holder > * {
    color: #938d8d;
    font-family: Arial;
    font-weight: 600;
    font-size: 13px;
    margin: 17px;
    word-break: break-word;
}

.video-tags {
    margin-left: 10px;
    color: #3f729b;
    font-size: 12px;
    flex: 2;
}


.margin {
    margin: 20px;
}


input[type=range] {
    -webkit-appearance: none;
}

input[type=file] {
    padding: 10px;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}


input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

.flex.margin.synonymn {
    background: #ccc;
    font-weight: 600;
    cursor: pointer;

}

/*.close {
    padding:20px;
    margin:0;
    font-weight:500;
    color:rgb(23,21,21);
    opacity:0.8;
    font-size:20px;
}*/

.flex.flex-wrap {
    flex-wrap: wrap;
}
.flex-grow{
    flex-grow:1;
}
.flex-right {
    display: flex;
    justify-content: flex-end;
}


.solutions-header {
    text-align: center;
    background: #1abc9c;
    color: white;
    font-size: 30px;
    font-weight: 700;
}

#search-text {
    color: #2f81a0;
    font-size: 20px;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

#video-results::-webkit-scrollbar {
    display: none;
}

/**
 * datatable css  write all other css above this
 * https://datatables.net/manual/styling/theme-creator
 * use the above link to make changes if required
*/
/*
    Custom Stylings
 */
table.dataTable.small-font {
    font-size: 10px;
}

/** 
 *  Column Class Definitions for data table columns 
 *  Add more classes and define the classes in the enumeration
 *  enum CC:string{}; defined in the DataTables.php file
 */

.dt-red{color:red}
.dt-green{color:green}
.dt-blue{color:blue}

.dt-col-bold{font-weight: bold;}





/*
 * Table styles
 */
table.dataTable {
    width: 100%;
    margin: 0 auto;
    clear: both;
    border-collapse: separate;
    border-spacing: 0;
    /*
     * Header and footer styles
     */
    /*
     * Body styles
     */
}

table .selected {
    color: black;
    font-weight: 500
}

table.dataTable thead th,
table.dataTable tfoot th {
    font-weight: bold;
}

table.dataTable thead th,
table.dataTable thead td {
    padding: 10px 18px;
    border-bottom: 1px dotted #111111;
}

table.dataTable thead th:active,
table.dataTable thead td:active {
    outline: none;
}

table.dataTable tfoot th,
table.dataTable tfoot td {
    padding: 10px 18px 6px 18px;
    border-top: 1px dotted #111111;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    *cursor: hand;
    background-repeat: no-repeat;
    background-position: center right;
}

table.dataTable tbody tr {
    background-color: #ffffff;
}

table.dataTable tbody tr.selected {
    background-color: #c6dded;
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 8px 10px;
}

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
    border-top: 1px solid #dddddd;
}

table.dataTable.row-border tbody tr:first-child th,
table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th,
table.dataTable.display tbody tr:first-child td {
    border-top: none;
}

table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
    border-top: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
}

table.dataTable.cell-border tbody tr th:first-child,
table.dataTable.cell-border tbody tr td:first-child {
    border-left: 1px solid #dddddd;
}

table.dataTable.cell-border tbody tr:first-child th,
table.dataTable.cell-border tbody tr:first-child td {
    border-top: none;
}

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
    background-color: #eef5ee;
}

table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
    background-color: #bfd6e5;
}

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
    background-color: #ebf1eb;
}

table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
    background-color: #a9b7d1;
}

table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 {
    background-color: #eff5ef;
}

table.dataTable.order-column tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_2,
table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.display tbody tr.selected > .sorting_2,
table.dataTable.display tbody tr.selected > .sorting_3 {
    background-color: #acbad4;
}

table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
    background-color: #e6ede6;
}

table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
    background-color: #e8efe8;
}

table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
    background-color: #eaf1ea;
}

table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
    background-color: #a6b3cd;
}

table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
    background-color: #a7b5ce;
}

table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
    background-color: #a9b6d0;
}

table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
    background-color: #eff5ef;
}

table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
    background-color: #f1f7f1;
}

table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
    background-color: #f3f9f3;
}

table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
    background-color: #acbad4;
}

table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
    background-color: #adbbd6;
}

table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
    background-color: #afbdd8;
}

table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
    background-color: #dfe6df;
}

table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
    background-color: #e1e8e1;
}

table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
    background-color: #e4ebe4;
}

table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
    background-color: #a1aec7;
}

table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
    background-color: #a2afc8;
}

table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
    background-color: #a4b2cb;
}

table.dataTable.no-footer {
    border-bottom: 1px dotted #111111;
}

table.dataTable.nowrap th, table.dataTable.nowrap td {
    white-space: nowrap;
}

table.dataTable.compact thead th,
table.dataTable.compact thead td {
    padding: 4px 17px 4px 4px;
}

table.dataTable.compact tfoot th,
table.dataTable.compact tfoot td {
    padding: 4px;
}

table.dataTable.compact tbody th,
table.dataTable.compact tbody td {
    padding: 4px;
}

table.dataTable th.dt-left,
table.dataTable td.dt-left {
    text-align: left;
}

table.dataTable th.dt-center,
table.dataTable td.dt-center,
table.dataTable td.dataTables_empty {
    text-align: center;
}

table.dataTable th.dt-right,
table.dataTable td.dt-right {
    text-align: right;
}

table.dataTable th.dt-justify,
table.dataTable td.dt-justify {
    text-align: justify;
}

table.dataTable th.dt-nowrap,
table.dataTable td.dt-nowrap {
    white-space: nowrap;
}

table.dataTable thead th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable tfoot td.dt-head-left {
    text-align: left;
}

table.dataTable thead th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable tfoot td.dt-head-center {
    text-align: center;
}

table.dataTable thead th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable tfoot td.dt-head-right {
    text-align: right;
}

table.dataTable thead th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable tfoot td.dt-head-justify {
    text-align: justify;
}

table.dataTable thead th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable tfoot td.dt-head-nowrap {
    white-space: nowrap;
}

table.dataTable tbody th.dt-body-left,
table.dataTable tbody td.dt-body-left {
    text-align: left;
}

table.dataTable tbody th.dt-body-center,
table.dataTable tbody td.dt-body-center {
    text-align: center;
}

table.dataTable tbody th.dt-body-right,
table.dataTable tbody td.dt-body-right {
    text-align: right;
}

table.dataTable tbody th.dt-body-justify,
table.dataTable tbody td.dt-body-justify {
    text-align: justify;
}

table.dataTable tbody th.dt-body-nowrap,
table.dataTable tbody td.dt-body-nowrap {
    white-space: nowrap;
}

table.dataTable,
table.dataTable th,
table.dataTable td {
    box-sizing: content-box;
}

/*
 * Control feature layout
 */
.dataTables_wrapper {
    position: relative;
    clear: both;
    *zoom: 1;
    zoom: 1;
}

.dataTables_wrapper .dataTables_length {
    float: left;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em;
}

.dataTables_wrapper .dataTables_info {
    clear: both;
    float: left;
    padding-top: 0.755em;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    padding-top: 0.25em;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    *cursor: hand;
    color: #00ac90 !important;
    border: 1px solid transparent;
    border-radius: 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #00ac90 !important;
    border: 1px solid #8fd68f;
    background-color: white;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f4fbf4));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, white 0%, #f4fbf4 100%);
    /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(top, white 0%, #f4fbf4 100%);
    /* FF3.6+ */
    background: -ms-linear-gradient(top, white 0%, #f4fbf4 100%);
    /* IE10+ */
    background: -o-linear-gradient(top, white 0%, #f4fbf4 100%);
    /* Opera 11.10+ */
    background: linear-gradient(to bottom, white 0%, #f4fbf4 100%);
    /* W3C */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #666 !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: white !important;
    border: 1px solid #111111;
    background-color: #585858;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111111));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #585858 0%, #111111 100%);
    /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(top, #585858 0%, #111111 100%);
    /* FF3.6+ */
    background: -ms-linear-gradient(top, #585858 0%, #111111 100%);
    /* IE10+ */
    background: -o-linear-gradient(top, #585858 0%, #111111 100%);
    /* Opera 11.10+ */
    background: linear-gradient(to bottom, #585858 0%, #111111 100%);
    /* W3C */
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    outline: none;
    background-color: #2b2b2b;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
    /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
    /* FF3.6+ */
    background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
    /* IE10+ */
    background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
    /* Opera 11.10+ */
    background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
    /* W3C */
    box-shadow: inset 0 0 3px #111;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    padding: 0 1em;
}

.dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 40px;
    margin-left: -50%;
    margin-top: -25px;
    padding-top: 20px;
    text-align: center;
    font-size: 1.2em;
    background-color: white;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(244, 251, 244, 0)), color-stop(25%, rgba(244, 251, 244, 0.9)), color-stop(75%, rgba(244, 251, 244, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, rgba(244, 251, 244, 0) 0%, rgba(244, 251, 244, 0.9) 25%, rgba(244, 251, 244, 0.9) 75%, rgba(244, 251, 244, 0) 100%);
    background: -moz-linear-gradient(left, rgba(244, 251, 244, 0) 0%, rgba(244, 251, 244, 0.9) 25%, rgba(244, 251, 244, 0.9) 75%, rgba(244, 251, 244, 0) 100%);
    background: -ms-linear-gradient(left, rgba(244, 251, 244, 0) 0%, rgba(244, 251, 244, 0.9) 25%, rgba(244, 251, 244, 0.9) 75%, rgba(244, 251, 244, 0) 100%);
    background: -o-linear-gradient(left, rgba(244, 251, 244, 0) 0%, rgba(244, 251, 244, 0.9) 25%, rgba(244, 251, 244, 0.9) 75%, rgba(244, 251, 244, 0) 100%);
    background: linear-gradient(to right, rgba(244, 251, 244, 0) 0%, rgba(244, 251, 244, 0.9) 25%, rgba(244, 251, 244, 0.9) 75%, rgba(244, 251, 244, 0) 100%);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #00ac90;
}

.dataTables_wrapper .dataTables_scroll {
    clear: both;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
    *margin-top: -1px;
    -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
    vertical-align: middle;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th > div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td > div.dataTables_sizing, .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th > div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td > div.dataTables_sizing {
    height: 0;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 1px dotted #111111;
}

.dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,
.dataTables_wrapper.no-footer div.dataTables_scrollBody > table {
    border-bottom: none;
}

.dataTables_wrapper:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

@media screen and (max-width: 767px) {
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
    }

    .dataTables_wrapper .dataTables_paginate {
        margin-top: 0.5em;
    }
}

@media screen and (max-width: 640px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: center;
    }

    .dataTables_wrapper .dataTables_filter {
        margin-top: 0.5em;
    }
}

/** For handling button styles on datatables*/
.dataTables_wrapper .dt-button-collection button, .dataTables_wrapper .dt-button-collectionspan {
    margin-top: 30px;
    border: 1px solid grey;
    border-radius: 2px;
    background: white;
    color: black;
    font-size: 9px !important;
}

.dt-buttons button {
    padding: 4px 10px;
    background: #21d0b3;
    color: white;
    border: 1px solid white;
    border-radius: 2px
}


/** CHURCH RELATED CSS **/

#church-background {
    background: white;
    padding-left: 90px;
    width: 100vw;
    min-height: 97vh;
}

::-webkit-scrollbar {
    display: none;
}

#location-details {
    display: none;
}

.navbar-fixed {
    height: 44px;
}


#content {
    justify-content: center;
    min-height: 90vh;
    background: white;
    width:auto;
}

.church-card {
    border-radius: 10px;
    border: 1px solid rgb(227, 226, 226);
    background: white;
    padding: 25px;
    margin: 15px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.church-card i.fa {
    color: #bcc8d7
}

.flex {
    display: flex;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.card-heading {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 0;
    font-family: 'Roboto', sans-serif;
}

.bz-heading-extra-large {
    font-size: 28px;
    font-weight: 700;
}

.with-bottom-border {
    border-bottom: 2px solid black;
}

.bz-table-bold {
    font-weight: 700;
}

.bz-table-bold.large {
    font-size: 20px;
}

.bz-table-bold.extra-large {
    font-size: 30px;
}


.card-ash-description {
    color: #687078;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    max-width: 65%;
}

.card-icon {
    width: 40px;
    margin: 5px;
    border-radius: 3px;
}

.card-line {
    background: rgb(230, 227, 227);
    height: 2px;
    margin: 5px 0;
}

.church-button.white {
    border: 1px solid #0f0f0f;
    color: #0f0f0f;
}

.church-button {
    background: white;
    border: 1px solid rgb(210, 215, 216);
    color: rgb(75, 75, 165);
    font-weight: 600;
    font-size: 11px;
    margin: 2px 3px;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;

}

.church-button i {
    margin: 0 5px 0 0;
}

.church-button.inactive{
    background: #ddd;
    color:white;
}

.church-button.inactive:hover{
    background:#ddd;color:white;    
}

.church-button.large {
    font-size: 14px;
    padding: 10px 20px;
}

.church-button:hover, .church-button:focus {
    color: white;
    background: #0069d9;
}

.church-button.white:hover {
    background: black !important;
}

.church-button.highlight {
    color: white;
    background: #0069d9;
}

.church-button.highlight-red {
    color: white;
    background: red;
    border-radius: 5px;
    text-align: center;
}

.value-header {
    word-break: break-word;
    font-size: 14px;
    margin: 0;
    width: 200px;
}

.value-numeric {
    font-size: 30px;
}

.header-and-value {
    margin: 5px;
    padding: 5px;
}

.flex.flex-center.flex-wrap {
    flex-wrap: wrap;
}

.one-summarised-timing {
    margin: 20px 0;
}

.collapsible {

}

.church-detail-item {

    display: flex;
    align-items: center;
    border-radius: 2px;
    margin: 13px 0;
    padding: 2px;
}

.church-detail-item p {
    color: rgb(80, 78, 78);
    margin: 0 10px;
    font-size: 11px;
}

.detail-end-color {
    background: rgb(14, 113, 202);
    width: 20px;
}

.church-detail-item i {
    color: rgb(80, 78, 78);
    margin: 0 5px;
}

.church-detail-item .data {
    font-size: 14px;
    font-weight: 600;

}

.flex-column {
    flex-direction: column;
}

#signup-home-top {
    background: rgb(99, 99, 102);
    height: 10vh;
}

#signup-home-bottom {
    background: #00ac90;
    height: 10vh;
}

#signup-home-center {
    height: 90vh;
}

#signup-card-1 {
    border: 1px solid grey;
    border-radius: 20px;
    background: rgb(236, 236, 229);
    width: 350px;
    height: 350px;
}

#email-input button {
    margin: 20px;
}

#signup-card-1 img {
    margin: 20px;
}

.small-info {
    color: grey;
    font-size: 11px;
}

.church-card-detail {
    color: grey;
    font-size: 14px;
    padding: 7px;
}


/** Help Sections Page */
.help-section-button {
    padding: 10px;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    margin: 20px 0;
}


.one-section-button {
    color: black;
    margin: 10px;
}

.help-section-button .arrow-holder {
    border-left: 1px dotted lightgrey;
    margin-left: 8px;
    padding-left: 4px;
}

.section-icon {
    font-size: 30px;
    padding: 0 20px;
}

.section-details p {
    margin: 0;
}

.section-name {
    text-transform: uppercase;
    font-size: 14px;
}

.section-bold-name {
    text-transform: uppercase;
    color: orange;
    font-weight: 700;
    font-size: 25px;
}

.section-description {
    color: grey;
}

.flex.flex-center.arrow-icon {
    margin-left: 20px;
}

.section-details {
    max-width: 275px;
}

#help-bottom {
    padding: 20px;
}

.my-tooltip {
    background: red;
    color: black;
    font-size: 11px;
}

/* New Tag With slider */
/** Video Tags css */

.tag {
    display: flex;
    justify-content: space-between;
    border-radius: 38px;
    border: 1px solid white;
    background: linear-gradient(to right, #f76960 10%, #527373 0%);
    color: white;
}

.tag_name {
    color: white;
}

.tag p {
    margin: 0;
}

.tag-center {
}

.name_of_the_tag {
    display: flex;
    text-align: center;
    justify-content: center;
    font-size: 12px;
}

#holder {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.tag-value-holder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    margin-right: 5px;
}

.closeCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 11px;
    border: 1px solid #8c8888;
    border-radius: 39px;
    margin-left: 5px;
    display: none;
}

.intensity-controller {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
}

.tag-emoji {
    font-size: 20px;
    display: none;
}

.tag-value {
    text-align: center;
    font-size: 10px;
    display: none;
}

.close-button p {
    font-weight: 600;
}

.tag-center {
    display: flex;
    margin: 0 5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/** Rating stars */
.star-rating {
    display: flex;
    font-size: 1.5em;
    justify-content: space-around;
    padding: 0 .2em;
    text-align: center;
    width: 5em;
}

.star-rating input {
    display: none;
}

.star-rating label {
    color: #555555;
    cursor: pointer;
}

.star {
    font-size: 20px;
}

.star-rating label:hover {
    color: #fc0;
}

/** Video Editor */

.editableText > input[type=text] {
    color: #ffcc7a;
}

.basic_details {
    margin-bottom: 5px;
}

.basic_details p {
    font-size: 9px;
    margin: 5px 0;
    max-width: 250px;
}


.all-videos-control-plus:before, .details-control-plus:before, .streams-control-plus:before, .shared-videos-control-plus:before, .pool-video-plus:before {
    content: "\f055";
    font-family: 'FontAwesome';
    color: #00ac90;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.all-videos-control-minus:before, .details-control-minus:before, .streams-control-minus:before, .shared-videos-control-minus:before, .pool-video-minus:before {
    content: "\f056";
    font-family: 'FontAwesome';
    display: flex;
    align-items: center;
    justify-content: center;
    color: #002752;
    cursor: pointer;
}

.led-green {
    margin: 0 auto;
    width: 18px;
    height: 18px;
    background-color: #ABFF00;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
}

.led-red {
    margin: 0 auto;
    width: 12px;
    height: 12px;
    background-color: #F00;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;

}

/** User Dashboard*/

.name-and-icon {
    min-width: 200px;
}

.value-holder.flex p {
    font-size: 30px;
}

.improvement {
    display: flex;
    justify-content: space-between;
}

.improvement p {
    font-weight: 600;
    padding-right: 10px;
}

.gain {
    color: #00ac90;
}

.loss {
    color: rgb(150, 64, 64);
}

.time-scope {
    color: rgb(156, 156, 156);
}

.name-and-icon p {
}

.data-card p {
    font-size: 10px;
    margin: 0;
}


.data-card.type-green {
    background: rgb(218, 247, 233);
}

.data-card.type-red {
    background: rgb(255, 199, 200);
}

.data-card.type-yellow {
    background: rgb(255, 254, 222);
}

.data-card-icon {
    font-size: 34px;
    color: #00ac90;
}

#welcome-user {
    margin-top: 100px
}

#welcome-user p {
    margin: 0;
    font-size: 10px;
    color: grey;
}

#welcome-user .name {
    font-size: 25px;
    font-weight: 600;
}

.hidden {
    display: none;
}

/** phpinfo styling */


.php-info-styling pre {
    margin: 0;
    font-family: monospace;
}

.php-info-styling a:link {
    color: #00ac90;
    text-decoration: none;
    background-color: #fff;
}

.php-info-styling a:hover {
    text-decoration: underline;
}

.php-info-styling table {
    border-collapse: collapse;
    border: 0;
    width: 974px;
    box-shadow: 1px 2px 3px #ccc;
}

.php-info-styling .center {
    text-align: center;
}

.php-info-styling .center table {
    margin: 1em auto;
    text-align: left;
}

.php-info-styling .center th {
    text-align: center !important;
}

.php-info-styling td, th {
    border: none;
    vertical-align: baseline;
    padding: 4px 5px;
}

.php-info-styling th {
    position: sticky;
    top: 0;
    background: inherit;
}

.php-info-styling h1 {
    font-size: 150%;
}

.php-info-styling h2 {
    font-size: 125%;
}

.php-info-styling .p {
    text-align: left;
}

.php-info-styling .e {
    color: white;
    background-color: #03c4a5;
    width: 300px;
    font-weight: bold;
}

.php-info-styling .h {
    background-color: #0d9b84;
    font-weight: bold;
}

.php-info-styling .v {
    background-color: #ffffff;
    max-width: 300px;
    overflow-x: auto;
    word-wrap: break-word;
}

.php-info-styling .v i {
    color: #999;
}

.php-info-styling img {
    float: right;
    border: 0;
}

.php-info-styling hr {
    width: 934px;
    background-color: #ccc;
    border: 0;
    height: 1px;
}

/** Bookings related css */
#report-logo {
    width: 100px;
    height: 100px;
}

#report-title-holder {
    width: 250px;
    padding-left: 10px;
}

#report-title {
    font-size: 20px;
    margin: 0px;
    font-weight: bold;
}

#report-name-and-address {
    width: 300px;
}

#report-name-and-address .name {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
    margin: 0px;
}

#date-and-time-of-mass p {
    margin: 0px;
    font-size: 15px;
    margin-left: 10px;
}

#report-header {
    border-bottom: 1px dotted black;
    border-top: 1px dotted black;
    margin-top: 20px;
    min-width: 70vw;
}

.datatable-report tr:nth-child(even) {
    background-color: #f2f2f2;
}

.datatable-report th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}


/**  Parish Message Sending */

#right-side-bar {
    min-width: 300px;
    position: fixed;
    border-left: 1px solid grey;
    padding: 10px;
    background: white;
    overflow-y: scroll;
    display: none;
}

#right-side-bar.transparent {
    border: none;
    background: none;
    min-width: auto;
}

#parishioners-table-card {
    background: white;
    border-radius: 5px;
    padding: 10px 15px;
}

.left-margin-for-dashboard {
    margin-left: 100px;
}

#dashboard-background {
    background: #eff5fc;
    width: 100vw;
    min-height: 100vh;
}

.small-side-card {
    border-radius: 5px;
    border: 1px solid lightgrey;
    padding: 5px;
    margin: 5px;
}

.small-side-card .purpose {
    color: darkblue;
    font-weight: 700;
    font-size: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid lightgrey;
}

.small-side-card.page {
    max-height: 350px;
    max-width: 350px;
    overflow: hidden;
    background: white;
}

.small-side-card.page .page-number {
    border-radius: 20px;
    font-weight: bold;
    color: white;
    display: flex;
    justify-content: center;
    padding: 4px 11px;
}

.small-side-card .delete {
    color: red;
}

.small-side-card.page:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    cursor: move;
}

#location-dashboard-right-side-bar {
    background: #00ac90;
    color: white;
    border: 1px solid lightgreen;
    border-radius: 50px;
    padding: 10px;
    margin-right: 20px;
}

#location-dashboard-right-side-bar .name-and-address-of-location {
    border-radius: 50px;
    background: ghostwhite;
    color: black;
}

#location-dashboard-right-side-bar .church-name, .address {
    font-size: 10px;
}

/** Prayer section */

#single-page-preview-within-editor {
    margin: 10px;
    border-radius: 4px;
    border: 1px solid lightgrey;
    padding: 4px;
}

.prayer-page-section {
    border: 2px solid white;
}

.section-content {
    width: 100%;
}

.prayer-page-section:hover {
    border: 2px solid greenyellow;
    cursor: move;
}

.actions, .page-action {
    position: relative;
    left: -10px;
}

.actions i {
    margin: 0px;
    padding: 0px;
}

#current-edit {
    background: lightblue;
}

strong, b {
    font-weight: bold;
}

.text-huge {
    font-size: 1.8em;
}

.text-tiny {
    font-size: 0.7em;
}

.text-big {
    font-size: 1.4em;
}

.text-small {
    font-size: 0.85em;
}


#page-section-holder {
    border-left: 1px solid lightgrey;
    padding-left: 50px;
    margin-left: 50px;
    min-width: 300px;
    max-height: 50vh;
    overflow-y: scroll;
}

.mobile-preview-window {
    overflow: scroll;
    display: inline-block;
    width: 350px !important;
    height: 600px;
    border-radius: 15px;
    padding: 10px 20px;
    border: 1px solid lightgrey;
    margin: 10px;
}

/** Bible related*/

.bibleBookChip {
    cursor: pointer;
}

.bibleBookChip:hover {
    border: 1px solid #00838d;
    transition: .5s linear;
}


/** Dashboard plugins*/

.figure-card {
    border-radius: 30px;
    width: 180px;
    height: 150px;
    margin:4px;
}


.figure-card .variance {
  padding: 0px 10px;
  border-radius: 20px;
  background: orange;
  color: white;
  font-size:11px;
}

.figure-card .icon-wrapper {
  background: white;
  border-radius: 50px;
  width: 40px;
  height: 40px;
}

.figure-card .value {
  font-size: 25px;
  font-weight: 503;
}

.figure-card .name {
  color: darkolivegreen;
  padding: 0px;
  margin: 0px;
}

.figure-card .flex-center{padding:4px;}