html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 0px; 
    background-color: GhostWhite;

}

h1 { 
    margin: 1em 0;
    padding-left: 0.75rem;
}

button {
    margin-top: 2em;
}

.footer {

    width: 100%;
    /* Set the fixed height of the footer here */
    background-color: #f5f5f5;
    font-size:12px;
    padding: 40px 0px 40px 0px;
    margin-top: 50px;
}

.container {
    width: auto;
    max-width: 680px;
    padding: 0 15px;
}
.container .text-muted {
    margin: 20px 0;
}

.page-header {
    border-bottom: none;
}

.input-group-prepend {
    width: 100%;
    padding-bottom: 10px;
}

.input-group-text {
    width: 30%;
}

.subscriptions {
    margin-top: 2em;
}

.unsubscribe {
    margin-right: 0.4rem;
}

label.unsubscribe {
    font-weight: 600;
}
 /* ========== default css ========== */
 body{
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
}
.background-purle{
    background-color: #42105a;
}
.text-white{
    color: #FFF;
}
.text-purle{
    color: #42105a;
}
.border-purle{
    border: 1px solid #42105a;
}
.button-red{
    background-color: #d93d33;
}

.layout-canvas-g > .section{
    margin-top: 0!important;
}

/* ========== inprement css ========== */
.updateBtn{
    border: 0;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 500;
}
.updateBtn:hover{
    background-color: #de7e78;
}
.updateBtn:active{
    background-color: #d93d33!important;
}
h1{
    font-weight: 900;
}
.topic-header{
    color: green;
    text-align: center;
    background-color: #ddf6e2;
}
.footer-right
{
    text-align: right;
    padding-top: 20px;
}
.footer-a
{
    text-decoration: none;
    color: #212529 !important;
}

@media only screen and (max-width: 600px) {
    .input-group-text{
        width: 250px;
    }
    .footer-right
    {
        text-align: center;
    }
    .footer-left{
        text-align: center;
    }

}

/* ========== radio button ========== */
/* The checkbox-group */
.checkbox-group {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-group input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #ddd;
}

/* On mouse-over, add a grey background color */
.checkbox-group:hover input ~ .checkmark {
background-color: #b0b0b0;
}

/* When the checkbox is checked, add a blue background */
.checkbox-group input:checked ~ .checkmark {
background-color: #42105a;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}

/* Show the checkmark when checked */
.checkbox-group input:checked ~ .checkmark:after {
display: block;
}

/* Style the checkmark/indicator */
.checkbox-group .checkmark:after {
left: 8px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}