@font-face {
    font-family: Chillax;
    src: url(../Fonts/Variable/Chillax-Variable.ttf);
    src: url(../Fonts/OTF/Chillax-Bold.otf);
    src: url(../Fonts/OTF/Chillax-Extralight.otf);
    src: url(../Fonts/OTF/Chillax-Light.otf);
    src: url(../Fonts/OTF/Chillax-Medium.otf);
    src: url(../Fonts/OTF/Chillax-Regular.otf);
    src: url(../Fonts/OTF/Chillax-Semibold.otf);
  }
@font-face {
    font-family: Satoshi;
    src: url(../Fonts/Variable/Satoshi-Variable.ttf);
    src: url(../Fonts/OTF/Satoshi-Black.otf);
    src: url(../Fonts/OTF/Satoshi-Bold.otf);
    src: url(../Fonts/OTF/Satoshi-Light.otf);
    src: url(../Fonts/OTF/Satoshi-Medium.otf);
    src: url(../Fonts/OTF/Satoshi-Medium.otf);
}

body{
    font-family: Satoshi;
    overflow-x: hidden;
}

html{
    scroll-behavior: smooth;
}

/*========== Multiply ===========*/

h1{
    font-family: Chillax;
    font-style: normal;
    font-weight: 600;
    font-size: 50px;
    line-height: 60px;
}

h2{
    font-family: Chillax;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 45px;
}

h3{
    color: #000000;
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
}

h4{
    font-family: Chillax;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
}

h5{
    font-weight: bold;
    font-size: 10px;
    line-height: 22px;
    margin-bottom: -5px;
}

h6{
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
}

p{
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
}

.maize-btn{
    background: #FFC952;
    border-radius: 40px;
    padding: 7px 20px 10px;
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
    border: 3px solid #FFC952;
    transition: all ease 0.5s;
}


.maize-btn:hover{
    background: #FFE4A8;
    border: 3px solid #FFE4A8;
}

.trans-btn{
    border: 3px solid #FFFFFF;
    border-radius: 40px;
    padding: 7px 20px 10px;
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
    color: #FFFFFF;
    transition: all ease 0.5s;
}

.trans-btn:hover{
    border: 3px solid #101010;
    background-color: #FFC952;
    color: #101010;
}

.red-btn{
    border: 2px solid #BC1D1D;
    background-color: #BC1D1D;
    border-radius: 40px;
    padding: 7px 20px 10px;
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
    color: #FFFFFF;
    transition: all ease 0.5s;
}

.black-btn{
    background: #101010;
    border-radius: 24px;
    padding: 4px 16px;
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
    border: 3px solid #101010;
    transition: all ease 0.5s;
    color: #FFFFFF;
}

.black-btn:hover{
    border: 3px solid #101010;
    background-color: #FFC952;
    color: #101010;
}

.purple-btn{
    background: #330F82;
    border-radius: 24px;
    padding: 4px 16px;
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
    border: 3px solid #330F82;
    transition: all ease 0.5s;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.purple-btn:hover{
    background-color: #FFC952;
    border: 3px solid #101010;
    color: #101010;
}

.text-red{
    color: #FF326C;
}

.text-maize{
    color: #FFC952;
}
.text-white{
    color: #FFFFFF;
}

.index-5{
    z-index: 5;
}

.btn:focus{
    box-shadow: none;
}

.bg-color-w{
    background-color: #F7F7F7;
}

/* Borders hover */


.border-2{
    border: 2px solid #330F82 !important;
    margin-top: 0;
}

.border-4{
    border: 4px solid #330F82;
    margin-top: 0;
}


#editContent .border-weight-m:hover{
    border: 2px solid #330F82;
    margin-top: 0;
}

.imgs .border-weight-m{
    border: 2px solid transparent;
}

.imgs .border-weight-m:hover{
    border: 2px solid #330F82;
    margin-top: 0;
    border-radius: 4px;
}

#editor .lh-g a:hover{
    text-decoration: none;
    color: #949494;
}

#editor .editor-head a:hover, #editor-header a:hover{
    color: #949494;
    text-decoration: none;
}

.lh-g:hover{
    text-decoration: none;
    color: #949494;
}

.editor-nav a:hover{
    text-decoration: none;
}
.editor-nav h6{
    padding-top: 6px;
}

.editor-nav a:hover h6{
    color: #949494;
}

#editor .editor-pagination .page-link:hover{
    border: 4px solid #330F82;
    margin-top: 0;
}

#editor .img-border{
    background-color: #FFC952;
    border: 5px solid #FFC952;
    border-radius: 40px;
    margin-top: -5px;
}

#editor .lh-g a:hover{
    text-decoration: none;
    color: #949494;
}

footer a:hover{
    text-decoration: none;
    color: #949494;
}

a:hover svg {
    fill: #949494;
}
/*========== Multiply sections ===========*/

/* Navbar */

.navbar{
    padding: 0 80px;
    z-index: 10;
    background-color: #FFFFFF;
}

.navbar-light .navbar-nav .nav-link{
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
    color: #101010;
    margin-top: 5px;
    padding: 10px 15px;
    margin-left: 10px;
}

nav .navbar-nav .active{
    border-bottom: 7px solid #330F82;
}

/* Footer */

footer{
    background-color: #101010;
    color: #FFFFFF;
    padding: 60px 100px;
}

footer hr{
    border-top:  1px solid #FFC952;
    width: 100%;
}

footer ul{
    list-style: none;
    padding: 0;
}

footer ul li a{
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
    color: #FFFFFF;
}

.footer-up{
    position: absolute;
    right: 0;
    margin-top: -100px;
    margin-right: 100px;
}

/* Others */
#others-2{
    margin: 80px 100px;
}

.photobooks-listing {
    margin: 80px 100px;
}

#others{
    margin: 450px 100px 75px;
}

.vector-4{
    position: absolute;
    right: 0;
    z-index: 2;
    margin-top: -90px;
    margin-right: -100px;
}

#others img, #others-2 img{
    border-radius: 8px;
}


.photobooks-listing img {
    border-radius: 8px;
}

.img-card-box{
    margin-top: 20px;
}

.img-card-box p{
    font-weight: normal;
    font-size: 14px;
    line-height: 23px;
    color: #000000;
}

.img-card-box i{
    background-color: #FFC952;
    margin-right: 10px;
    padding: 5px 8px;
}

.img-card-box a{
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
    color: #000000;
    transition: all ease .5s;
}


.img-card-box a:hover{
    color: #949494;
    text-decoration: none;
}

/*========== Homepage ===========*/

/* Header */
#home-header{
    overflow: hidden;
}

.home-head-left{
    background: #330F82;
    padding: 220px 60px 100px;
}

.header-text{
    max-width: 860px;
}

#home-header h1{
    color: #FFFFFF;
}

.head-buttons{
    margin-top: 40px;
    margin-bottom: 80px;
}

.home-uh{
    font-weight: bold;
    font-size: 22px;
    line-height: 28px;
    margin-right: 10px;
}

.home-head-vector{
    position: absolute;
    margin-top: -100px;
    margin-left: 30%;
}

/* Story */
#story{
    background-color: #FFE4A8;
    margin: 80px 100px 200px;
    padding: 100px;
    border-radius: 69px;
}

#story h1{
    color: #330F82;
}

#story .story-pic{
    position: absolute;
    margin-top: 100px;
    left: 0;
}

/* Easy to make */

#easy-to-make{
    background-color: #330F82;
    padding: 80px 0 100px 100px;
    color: #FFFFFF;
}

#easy-to-make h3{
    color: #FFFFFF;
}

#easy-to-make p{
    font-weight: normal;
    font-size: 14px;
    line-height: 23px
}

#easy-to-make .easy-group{
    margin-top: 40px;
}

#easy-to-make .easy-text{
    padding: 10px;
    margin-left: 20px;
}

#easy-to-make .easy-buttons{
    margin-top: 60px;
}

#easy-to-make .easy-buttons a{
    margin-right: 16px;
}

#easy-to-make .easy-buttons i{
    margin-left: 8px;
}

/* Create your book */

#create-book{
    margin: 80px 100px;
}

#create-book .free-book{
    background-color: #871C73;
    border-radius: 69px;
    padding: 40px 70px;
    color: #FFFFFF;
}

#create-book .premium-book{
    background-color: #330F82;
    border-radius: 69px;
    padding: 40px 70px;
    color: #FFFFFF;
}

#create-book .add-ons{
    display: none;
    background-color: #7343bd;
    border-radius: 69px;
    padding: 15px 40px;
    color: #FFFFFF;
}

#create-book h1{
    margin-bottom: 40px;
}

#create-book h2{
    margin-bottom: 18px;
}

#create-book li{
    margin-bottom: 7px;
}

#create-book i{
    color: #FFFFFF;
    /*background-color: #101010;*/
    border-radius: 20px;
    margin-right: 10px;
}

#create-book span{
    color: #FFC952;
}

#create-book button,
#create-book a {
    margin-top: 30px;
}

#create-book .star{
    margin-top: -100px;
    right: 0;
}

/* Payment Form Page */
#payment-form-page {
    margin-bottom: 60px;
}

@media (min-width: 768px) {
    #payment-form-page {
        margin: 80px 100px;
    }
}

#payment-form-page #pr-ten,
#payment-form-page #pr-five {
    width: 180px;
    margin: auto;
}

#payment-form-page #pp-promo {
    width: 30vw;
    min-width: 500px;
    margin: auto;
}

#payment-form-page #ssl-secure {
    max-width: 100%;
    width: 500px;
    margin: auto;
}

#payment-form-page .ssl-img {
    width: 35%;
    margin: auto;
    display: block;
    margin-top: 50px;
}

#payment-form-page #promo-div,
#payment-form-page #pp-div {
    width: 100%;
    align-self: center;
    border-radius: 7px;
    padding: 10px;
    margin: auto;
}

#payment-form-page #pp-div {
    margin-top: 30px;
    border: grey solid 1px;
    border-radius: 6px;
    padding-top: 17px;
    padding-bottom: 7px;
}

#payment-form-page #promo-div {
    text-align: center;
    margin-top: 0px;
}

#payment-form-page #payment-form {
    width: 30vw;
    min-width: 500px;
    align-self: center;
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
    0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    padding: 40px;
    margin: auto;
    margin-top: 40px;
}

#payment-form-page .hidden {
    display: none;
}

#payment-form-page #payment-message {
    color: rgb(105, 115, 134);
    font-size: 16px;
    line-height: 20px;
    padding-top: 12px;
    text-align: center;
}

#payment-form-page #payment-element {
    margin-bottom: 24px;
}

/* Buttons and links */
#payment-form-page #payment-form button {
    background: #5469d4;
    font-family: Arial, sans-serif;
    color: #ffffff;
    border-radius: 4px;
    border: 0;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: block;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
    width: 100%;
}

#payment-form-page button:hover {
    filter: contrast(115%);
}

#payment-form-page button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* spinner/processing state, errors */
#payment-form-page .spinner,
#payment-form-page .spinner:before,
#payment-form-page .spinner:after {
    border-radius: 50%;
}

#payment-form-page .spinner {
    color: #ffffff;
    font-size: 22px;
    text-indent: -99999px;
    margin: 0px auto;
    position: relative;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

#payment-form-page .spinner:before,
#payment-form-page .spinner:after {
    position: absolute;
    content: "";
}

#payment-form-page .spinner:before {
    width: 10.4px;
    height: 20.4px;
    background: #5469d4;
    border-radius: 20.4px 0 0 20.4px;
    top: -0.2px;
    left: -0.2px;
    -webkit-transform-origin: 10.4px 10.2px;
    transform-origin: 10.4px 10.2px;
    -webkit-animation: loading 2s infinite ease 1.5s;
    animation: loading 2s infinite ease 1.5s;
}

#payment-form-page .spinner:after {
    width: 10.4px;
    height: 10.2px;
    background: #5469d4;
    border-radius: 0 10.2px 10.2px 0;
    top: -0.1px;
    left: 10.2px;
    -webkit-transform-origin: 0px 10.2px;
    transform-origin: 0px 10.2px;
    -webkit-animation: loading 2s infinite ease;
    animation: loading 2s infinite ease;
}

#payment-form-page #error-message {
    color: red;
    margin-top: 15px;
}

#payment-form-page .separator-graphic {
    position: relative;
    width: 50vw;
    min-width: 500px;
    text-align: center;
    margin: 45px auto 11px;
}

#payment-form-page .separator-graphic hr {
    border: 0;
    border-top: 1px solid #dadae0;
}

#payment-form-page .separator-graphic .or-container {
    display: block;
    width: 48px;
    height: 48px;
    margin: -2rem auto 0;
    background: #fff;
}

#payment-form-page .separator-graphic .or-container span {
    display: block;
    background: #ffc952;
    border-radius: 50px;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    line-height: 28px;
    font-size: 15px;
    text-align: center;
}

#payment-form-page #paypal-form {
    position: relative;
    width: 30vw;
    min-width: 500px;
    margin: 0 auto;
}

#payment-form-page #paypal-form a {
    text-align: center;
    margin: 0 auto;
    border-radius: 7px;
    box-shadow: 0px 0px 0px 0.5px rgb(50 50 93 / 10%), 0px 2px 5px 0px rgb(50 50 93 / 10%), 0px 1px 1.5px 0px rgb(0 0 0 / 7%);
    width: 100%;
    padding: 10px 18px;
    background: #FFC952;
    border: 3px solid #FFC952;
    transition: all ease 0.5s;
}

#payment-form-page #paypal-form a:hover,
#payment-form-page #paypal-form a:focus {
    filter: contrast(115%);
}

#payment-form-page #paypal-form a span {
    display: inline-block;
    margin-top: 8px;
}

#payment-form-page #paypal-form a img {
    display: inline-block;
    margin-top: -6px;
    margin-left: 8px;
}

#payment-form-page #promo-code-form {
    position: relative;
    width: 30vw;
    min-width: 500px;
    margin: 0 auto;
}

#payment-form-page #promo-code-form #promo-code {
    width: 65%;
    margin-right: 5%;
}

#payment-form-page #promo-code-form #apply-code {
    width: 30%;
    background-color: #ff316b;
    color: #ffffff;
    border-color: #ff316b;
}

@media only screen and (max-width: 530px) {
    #payment-form-page #paypal-form {
        width: 90vw;
        min-width: initial;
    }
}

@media only screen and (max-width: 500px) {
    #payment-form-page #payment-form {
        min-width: 98%;
        padding: 12px;
    }

    #payment-form-page #pp-promo{
        min-width: 98%;
    }
}

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

@media only screen and (max-width: 600px) {
    #payment-form-page form {
        width: 80vw;
        min-width: initial;
    }
}

/* FAQs */

#FAQs{
    background-color: #F7F7F7;
    padding: 80px 0 80px 100px;
}
#FAQs h1{
    margin-bottom: 40px;
}

#FAQs .card-header{
    padding: 0;
}

#FAQs .card{
    border-radius: 8px;
    border: none;
    margin-bottom: 24px;
}

#FAQs button {
    color: #101010;
    background: #FFC952;
    padding: 20px 16px 15px;
}

#FAQs .card i{
    margin-top: -3px;
}

#FAQs button:hover{
    text-decoration: none;
}

#FAQs .collapsed{
    background-color: #101010;
    color:#ffffff;
}

#FAQs .card-body{
    background-color: #F7F7F7;
    border: none;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
}

#FAQs .card-body a{
    color: #871C73;
}

#FAQs button{
    text-decoration: none;
}

.vector-2{
    position: absolute;
    margin-top: -450px;
    margin-left: -100px;
}

.vector-3{
    position: absolute;
    margin-top: -350px;
    margin-left: -140px;
}

/*========== Example ==========*/

#other-creations{
    margin: 80px 100px;
}

/* Slider */

#slider{
    background-color: #FFE4A8;
    position: relative;
    height: 490px;
    margin: 80px 100px;
}

#slider h2{
    margin-top: 40px;
    margin-bottom: 40px;
    color: #101010;
}

.carousel-control-prev{
    margin-left: -90px;
    background: #101010;
    opacity: 1;
    border-radius: 48px;
    height: 80px;
    width: 80px;
}

.carousel-control-next{
    margin-right: -90px;
    background: #101010;
    opacity: 1;
    border-radius: 48px;
    height: 80px;
    width: 80px;
}

.carousel-indicators{
    margin-bottom: -30px;
}

.carousel-indicators li{
    background-color: #101010;
    height: 12px;
    width: 12px;
    border-radius: 50%;
}


/*========== Example ========== */

#new-user-header{
    background-color: #330F82;
    margin: 50px 100px;
    padding: 60px 100px;
    border-radius: 69px;
}

#new-user-header h1{
    color: #FFFFFF;
}

#new-user-header .new-user-buttons{
    margin-top: 40px;
}

#new-user-header .new-user-head-img{
    position: absolute;
    right: 0;
    top: 35px;
}

/*========== Editor ========== */

#editor{
    background-color: #F7F7F7;
}

#editor .editor-head {
    margin-top: 10px;
    margin-bottom: 20px;
}

#editor .editor-head h4{
    margin-left: 100px;
    color: #000000;
}

#editor .editor-head .header-imgs{
    margin-top: -5px;
}

#editor .editor-head h4 span{
    font-weight: bold;
    padding: 3px 10px;
}

#editor .editor-head h4 small{
    font-weight: bold;
    font-size: 14px;
    line-height: 21px;
    margin-right: 10px;
}

#editor .editor-head h4 i{
    margin-left: 10px;
}

#editor .preview-header .maize-btn{
    border-radius: 40px;
}

#editor .maize-btn{
    border-radius: 40px 0 0 40px;
    margin-left: 20px;
    padding: 8px 16px 10px;
}

#editor .a-btn-right i{
    margin-right: 10px;
}

#editor a{
    color: #101010;
    font-weight: bold;
}

/* Editor nav */

#editor .nav-col{
    background-color: #FFFFFF;
    border-top: 1px solid #D7D6D6;
}

#editor .editor-nav{
    background-color: #FFFFFF;
    border: 1px solid #D7D6D6;
    border-bottom: 0;
    border-left: 0;
    border-top-right-radius: 30px;
    height: 100%;
}

#editor .editor-nav div{
    margin-top: 20px;
}

#editor .editor-nav .active{
    background-color: #330F82;
    padding: 10px;
    border-radius: 24px;
    fill: #FFFFFF;
}

#editor .editor-nav {
    /*background-color: #330F82;*/
    /*border-radius: 40px 40px 0 0;*/
    /*position: fixed;*/
}

.go-pro{
    background-color: #330F82;
    border-radius: 40px 40px 0 0;
    position: fixed;
    bottom: 0px;
    /*margin-top: 100px !important;*/
}

#editor .editor-nav .go-pro h6{
    color: #FFFFFF;
    padding: 10px 24px;
}


#editor .editor-nav .go-pro .maize-btn{
    padding: 3px 16px 4px;
    border-radius: 40px;
    margin-left: 0;
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 12px;
}

#editor .editor-nav .go-pro .star-1{
    margin-top: 10px;
    margin-bottom: 0;
    margin-left: -10px;
}

#editor .editor-nav .go-pro .en-frame{
    position: absolute;
    left: 0;
    margin-top: -40px;
}
#editor .editor-nav .go-pro .star-2{
    position: absolute;
    margin-left: -25px;
    z-index: 3;
}
/* Second nav */
#editor .sec-nav{
    background-color: #FFFFFF;
    border: 1px solid #D7D6D6;
    border-bottom: 0;
    border-left: 0;
    border-top-right-radius: 30px;
    padding: 7px;
}

#editor .sec-nav .black-btn{
    margin-top: 24px;
}

#editor .sec-nav hr{
    border-top: 1px solid #949494;
    margin: 7px;
}

#editor .sec-nav .imgs img{
    margin-bottom: 11px;
}

/* EDITOR BODY */

#editor .editor-body{
    background-color: #FFFFFF;
    padding: 50px 100px 0;
    margin-left: 24px;
    margin-right: 24px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    height: 100%;
    border: 1px solid #D7D6D6;
}

 #editor .editor-body svg{
    margin-top: -5px;
}

#editor .editor-content{
    margin-top: 16px;
    height: 578px;
}

#editor .editor-main{
    width: 100%;
    max-width: 100%;
    height: 568px;
    background-color: #949494;
    display: grid;
    place-items: center;
}

.a-left{
    position: absolute;
    left: -80px;
}

.a-right{
    position: absolute;
    right: 60px;
}

#editor .editor-pagination{
    margin-top: 30px;
}

#editor .editor-pagination .page-link{
    border: 1px solid #949494;
    border-radius: 0;
    color: #101010;
    background-color: #FFFFFF;
    padding: 15px 28px;
    margin-top: 2px;
}

#editor .editor-pagination .active{
    border: 1px solid #949494;
    border-radius: 0;
    color: #101010;
    background-color: #F7F7F7;
    border: 4px solid #330F82;
    margin-top: 0;
}


/* SWITCH */

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px;
    border: 1px solid #101010;
  }

  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 14px;
    left: 1px;
    bottom: 1px;
    background-color: #777777;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 2px;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
    background-color: #43A820;
  }

  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }


/*========== MODALS ==========*/

.modal .modal-footer .trans-btn{
    border: 2px solid #101010;
    color: #101010;
}

.modal .modal-header h2, .modal .modal-header h4{
    margin-top: 20px;
}

.modal .close{
    opacity: 1;
}

.modal-dialog{
    margin-top: 100px;
}

.modal .modal-header, .modal .modal-footer{
    border: none;
}
/* premium modal */

.premium .modal-header{
    background-color: #330F82;
    color: #FFFFFF;
}

.premium .modal-body, .premium .modal-header{
    padding-left: 30px;
}

.premium .modal-header .premium-vector{
    position: absolute;
    top: 0;
    left: 0;
}

.premium .modal-header span{
    color: #FFC952;
}

.premium .modal-header h2{
    margin-top: 60px;
}

.premium .modal-body ul{
    list-style-type: none;
    padding: 0;
}

.premium .modal-body ul li::before {
    content: "\2022";
    color: #330F82;
    font-weight: bold;
    display: inline-block;
    font-size: 24px;
    width: 8px;
    margin-right: 20px;
}

/* Book */

#book label{
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    color: #101010;
}

#book input{
    box-shadow: none;
    border: 1px solid #949494;
    border-radius: 4px;
    padding: 20px 10px;
    border-width: 2px;
    transition: .5s;
}

#book input:focus{
    border: 2px solid #330F82;
}


/* Add-photo */

#add-photo .modal-dialog{
    max-width: 95vw;
}

#add-photo .modal-header{
    margin-left: 45px;
    margin-right: 45px;
}

#add-photo .modal-con{
    display: grid;
    place-items: center;
    border: 2px dashed #101010;
    border-radius: 8px;
    margin-left: 45px;
    margin-right: 45px;
    padding: 40px;
}

#add-photo .modal-body h4{
    margin: 10px 0;
}

#add-photo .modal-body .btn{
    margin-top: 20px;
}

#add-photo .modal-footer{
    margin-left: 45px;
    margin-right: 45px;
}


/* Add-video */

#add-video .modal-dialog{
    max-width: 1000px;
}

#add-video .modal-header{
    margin-left: 45px;
    margin-right: 45px;
}

#add-video .modal-con{
    display: grid;
    place-items: center;
    border: 2px dashed #101010;
    border-radius: 8px;
    margin-left: 45px;
    margin-right: 45px;
    padding: 40px;
}

#add-video .modal-body h4{
    margin: 10px 0;
}

#add-video .modal-body .btn{
    margin-top: 20px;
}

#add-video .modal-footer{
    margin-left: 45px;
    margin-right: 45px;
}


/* Edit-content */

#editContent .modal-dialog{
    max-width: 900px;
}

#editContent .trans-btn{
    border: 2px solid #101010;
    color: #101010;
    padding: 9px 16px 12px;
    border-radius: 24px;
    margin-right: 15px;
}

#editContent .trans-btn img{
    margin-right: 5px;
    margin-top: -5px;
}

#editContent .border-weight-m{
    height: 38px;
    width: 38px;
    border: 1px solid #949494;
    border-radius: 4px;
    margin-right: 8px;
    display: grid;
    place-items: center;
}

#editContent .modal-header, #editContent .modal-footer{
    padding-left: 40px;
}

#editContent input{
    height: 40px;
    width: 40px;
    background-color: #FFFFFF;
}

.add-manage-comment a {
    background-color: #F7F7F7;
    width: 100%;
    padding: 5px;
}

.add-manage-comment .active{
    background-color: #330F82;
}
.add-manage-comment .active svg{
    fill: #FFFFFF;
}
.add-manage-comment .active h6{
    color: #FFFFFF;
}

.add-manage-comment a:hover{
    text-decoration: none;
}
.add-manage-comment a:hover h6{
    color: #949494;
    text-decoration: none;
}

.add-manage-comment a:hover svg{
    fill: #949494;
}


#editor .comment-sec{
    background-color: #FFE4A8;
    border: 1px solid #D7D6D6;
    border-bottom: 0;
    border-right: 0;
    border-top-left-radius: 30px;
    height: 100%;
}

#editor .comment-sec div{
    margin-top: 20px;
}

#editor .comment-sec a:hover h6{
    color: #949494;
}

#editor .comment-sec a:hover{
    text-decoration: none;
}

.larger-h6{
    font-size: 18px;
}