#dynamic-table td,
#dynamic-table th {
    border: 1px solid #ddd;
    padding: 8px;
}

#dynamic-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

#dynamic-table tr:hover {
    background-color: #ddd;
}

#dynamic-table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #04aa6d;
    color: white;
}
.invalid-feedback{
    color: red !important;
}
table.dataTable tbody tr {
    vertical-align: top!important;
}

/* font embedded */
/* real use */

@font-face {
    font-family: "AlexBrush-Regular";
    src: url("/fonts/AlexBrush-Regular.ttf");
}

@font-face {
    font-family: "Amiri-Regular";
    src: url("/fonts/Amiri-Regular.ttf");
}

@font-face {
    font-family: "Corben-Regular";
    src: url("/fonts/Corben-Regular.ttf");
}

@font-face {
    font-family: "black_jack";
    src: url("/fonts/black_jack.ttf");
}


@font-face {
    font-family: "Dancing Script";
    src: url("/fonts/Dancing Script.ttf");
}

@font-face {
    font-family: "MarketingScript";
    src: url("/fonts/MarketingScript.ttf");
}

@font-face {
    font-family: "petitformalscript-regular-webfont";
    src: url("/fonts/petitformalscript-regular-webfont.ttf");
}

@font-face {
    font-family: "Philosopher-Regular";
    src: url("/fonts/Philosopher-Regular.ttf");
}

@font-face {
    font-family: "PlayfairDisplaySC-Regular";
    src: url("/fonts/PlayfairDisplaySC-Regular.ttf");
}

@font-face {
    font-family: "Quicksand-Regular";
    src: url("/fonts/Quicksand-Regular.ttf");
}

@font-face {
    font-family: "slick";
    src: url("/fonts/slick.ttf");
}

@font-face {
    font-family: "JosefinSlab-Regular";
    src: url("/fonts/JosefinSlab-Regular.ttf");
}

@font-face {
    font-family: "Niconne-Regular";
    src: url("/fonts/Niconne-Regular.ttf");
}

@font-face {
    font-family: "Parisienne-Regular";
    src: url("/fonts/Parisienne-Regular.ttf");
}

@font-face {
    font-family: "PinyonScript-Regular";
    src: url("/fonts/PinyonScript-Regular.ttf");
}

@font-face {
    font-family: "PoiretOne-Regular";
    src: url("/fonts/PoiretOne-Regular.ttf");
}

@font-face {
    font-family: "Raleway-Regular";
    src: url("/fonts/Raleway-Regular.ttf");
}

@font-face {
    font-family: "Rochester-Regular";
    src: url("/fonts/Rochester-Regular.ttf");
}

@font-face {
    font-family: "Sacramento-Regular";
    src: url("/fonts/Sacramento-Regular.ttf");
}

@font-face {
    font-family: "Satisfy-Regular";
    src: url("/fonts/Satisfy-Regular.ttf");
}

@font-face {
    font-family: "OpenSans-Regular";
    src: url("/fonts/OpenSans-Regular.ttf");
}

/* end real use */

@font-face {
    font-family: "Baskerville-SemiBold";
    src: url("/fonts/Baskerville-SemiBold.ttf");
}

@font-face {
    font-family: "black_jack-webfont";
    src: url("/fonts/black_jack-webfont.ttf");
}

@font-face {
    font-family: "carolyna_pro_black-webfont";
    src: url("/fonts/carolyna_pro_black-webfont.ttf");
}

@font-face {
    font-family: "carolynacute-webfont";
    src: url("/fonts/carolynacute-webfont.ttf");
}

@font-face {
    font-family: "ecuyerr-webfont";
    src: url("/fonts/ecuyerr-webfont.ttf");
}

@font-face {
    font-family: "fontawesome-webfont";
    src: url("/fonts/fontawesome-webfont.ttf");
}

@font-face {
    font-family: "glyphicons-halflings-regular";
    src: url("/fonts/glyphicons-halflings-regular.ttf");
}

@font-face {
    font-family: "greatvibes-regular-webfont";
    src: url("/fonts/greatvibes-regular-webfont.ttf");
}

@font-face {
    font-family: "helvetica-webfont";
    src: url("/fonts/helvetica-webfont.ttf");
}

@font-face {
    font-family: "marketingscript-webfont";
    src: url("/fonts/marketingscript-webfont.ttf");
}

@font-face {
    font-family: "palatino-roman-webfont";
    src: url("/fonts/palatino-roman-webfont.ttf");
}

@font-face {
    font-family: "park_lane_nf-webfont";
    src: url("/fonts/park_lane_nf-webfont.ttf");
}

@font-face {
    font-family: "SignPainter";
    src: url("/fonts/SignPainter.ttf");
}

@font-face {
    font-family: "theanodidot-regular-webfont";
    src: url("/fonts/theanodidot-regular-webfont.ttf");
}

/* end font embedded */

/* card template page */

#left-col {
    width: 60%;
    padding: 1% 1% 1% 0;
    display: block;
    float: left;
    position: relative;
    overflow: hidden;
}

#right-col {
    width: 38%;
    padding: 30px 20px;
    float: left;
    overflow-y: scroll;
    box-shadow: 0 4px 12px rgb(82 82 82 / 15%);
    height: 94%;
    display: block;
    right: 0;
    top: 3%;
    position: absolute;
    margin: 0 1%;
}
#right-col::-webkit-scrollbar {
    width: 8px;
}
/* Track */
#right-col::-webkit-scrollbar-track {
    background: #fff;
}
/* Handle */
#right-col::-webkit-scrollbar-thumb {
    background: #f9f9f9;
}
/* Handle on hover */
#right-col::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

#mb-tinymce-heading1 {
    padding-top: 10px;
}

#mb-tinymce-heading {
    /* padding-top: 40px; */
    max-height: 104px;
    margin-bottom: 20px;
    overflow: auto;
}

#tinymce-body {
    padding-top: 10px;
    margin-top: 40px;
}
#tinymce-body1 {
    padding-top: 10px;
    margin-top: 40px;
}
#mb-tinymce-body {
    margin-top: 10px;
    padding-top: 0px;
    max-height: 1080px;
    overflow: auto;
}
#mb-tinymce-body1 {
    margin-top: 60px;
    padding-top: 0px;
}
#card-template-preview {
    overflow: hidden;
    background: #fff;
    padding: 20px 0;
    width: 100%;
    position: relative;
    margin: auto;
}
#mb-card-template-preview {
    background: #fff;
    padding: 30px;
    overflow: hidden;
    width: 380px;
    margin: auto;
}
.tox.tox-tinymce {
    z-index: 99999;
}

#template-change-form {
    width: 50%;
    float: left;
}
#template-div {
    width: 100%;
    border-bottom: 1px solid #f4f4f4;
    overflow: hidden;
}
#template_id_new{
    float: right;
    width: 60%;
}
#copy-modal {
    float: right;
    height: 35px;
    padding: 0;
    font-size: 14px;
    width: 110px;
}

#copy-modal-box {
    width: 90% !important;
}

.demo-inline {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: left;
    color: #626262;
    line-height: 1.3;
    font-size: 14px;
    background-color: #ffffff;
    text-align: left;
    vertical-align: top;
    padding: 20px 20px 20px 20px;
}
.demo-inline .container {
    background-color: #fafafa;
    margin: -20px -20px 0 -20px;
    padding: 20px;
}
.demo-inline p {
    margin: 0 0;
}
.demo-inline h1 {
    color: #1976d2;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    margin: 0 0;
}
.demo-inline h2 {
    color: #1976d2;
    font-size: 2em;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 40px;
}
.demo-inline h3 {
    font-size: 1.5em;
    color: #403f42;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 40px;
}
.demo-inline ul,
.demo-inline ol {
    padding-left: 20px;
}
.demo-inline ul {
    list-style: disc;
}
.demo-inline ol {
    list-style: decimal;
}
.demo-inline a {
    text-decoration: underline;
}
.demo-inline img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 10px 10px 10px;
}
.demo-inline textarea {
    display: none;
}
.demo-inline *[contentEditable="true"]:focus,
.demo-inline *[contentEditable="true"]:hover {
    outline: 2px solid #1976d2;
}

/* end card template page */
.edit-btn {
    width: 20px;
    height: 20px;
    border: 0px;
    position: absolute;
    color: #fff;
    background: blue;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
    right: 10px;
    top: 35px;
}
.delete-btn {
    width: 20px;
    height: 20px;
    border: 0px;
    position: absolute;
    color: #fff;
    background: red;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
    right: 10px;
    top: 12px;
}

#delete-btn {
    width: 20px;
    height: 20px;
    border: 0px;
    position: absolute;
    color: #fff;
    background: red;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
    right: 10px;
    top: 12px;
}

.sort_ids {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 18px;
    height: 18px;
}

#add-btn {
    float: right;
}

.sortable li {
    text-align: center;
}

.ecard-sorting-page .thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    object-fit: cover !important;
    width: 100% !important;
    height: 100px !important;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border 0.2s ease-in-out;
}

.toast {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9999;
}

.bootstrap-basic {
    background: white;
}

/* Braintree Hosted Fields styling classes*/
.braintree-hosted-fields-focused {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.braintree-hosted-fields-focused.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
#button-group-div {
    width: 260px;
    float: right;
}
#template-save {
    margin-left: 20px;
}
.text-active{
    color: green;
}
.text-inactive{
    color: red;
}
.required-text{
    color: red;
}

.loading {
  display: none;
}
.loading-content {
    display: block;
}

.loader{
  position: fixed;
  display: flex;
  height: 100%;
  width: 100%;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.7);
  top: 0px;
    left: 0px;
}

.loader img{
  width:80px;
  height: auto;
}
.sidebar-collapse .tab-content .right-editor-div{
    overflow-y: clip;
    width: 500px !important;
    padding: 100px 46px 0px 46px !important;
    /* margin: 0 !important; */
    position: relative !important;
    height:auto !important;
    /* overflow-y: inherit !important; */
    color: #222f3e;
}
.sidebar-collapse  .left-editor-div
{
    width: calc(100% - 500px) !important;
}
.sidebar-collapse #card-template-preview
{
    display: flex;
}
.tox-editor-header {
  max-width: 480px !important;
  /* width: 390px !important; */
}

.tox .tox-tbtn--select {
    width: 76px !important;
}

/**************/
.tab-content #card-template-preview #tinymce-heading h3 {
    font-size: 40px;
    font-family: 'Philosopher-Regular';
    color: #000;
    margin:0;
    font-weight: bold;
}
.tab-content #card-template-preview #tinymce-body {
    font-size: 22px;
    font-family: PlayfairDisplaySC-Regular;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000;
    padding-top: 0;
    overflow-y: auto;
    max-height: 460px;
    min-height: 460px;
}

.tab-content #card-template-preview #right-col {
    padding-bottom: 20px;
    padding: 40px 46px 0;
    /* overflow-y: scroll; */
    position: static;
    margin-right: auto;
    max-width: 482px;
    /* max-height: 600px; */
    /* min-height: 600px; */
    min-width: 482px;
}

#right-col #tinymce-heading {
    max-height: 60px;
    overflow-y: auto;
}

.tab-content #card-template-preview #video-div,.video--left{
    padding-top: 580px !important;
}
.tab-content #card-template-preview #left-col{
    padding: 0;
}
.tab-content #card-template-preview{
    display: flex;
    align-items: center;
}
::-webkit-scrollbar {
    display: none;
}

.header-logo{
    margin-top: -20px;
}

@media(max-width: 767px){
    .tab-content #card-template-preview #right-col{
        min-width: inherit;
    }
    .editor--wrap {
        padding: 60px 20px 24px 20px !important;
        max-height: 600px;
    overflow: scroll;
    text-align: center;
    }
    #mb-card-template-preview{
        padding: 30px 0px;
        width: 343px;
    }
    #mobileview,#mobileview1 {
        margin: 0px -20px;
    }
}

@media (min-width: 768px) and (max-width: 1300px){
    #right-col{
    padding: 60px 13px 0!important;
    }
    .tab-content #card-template-preview #right-col{
        min-width: 283px;
        max-width: 283px;
        max-height: 431px;
        min-height: inherit;
    }
    .tab-content #card-template-preview #video-div, .video--left {
        padding-top: 431px !important;
    }
}


/* @media(max-width: 991px){
    .tab-content #card-template-preview{
        flex-wrap: wrap;
        width: 100%;
        max-width: 375px;
        display: block;
        padding: 0 16px;
        margin: 26px auto auto;
    }
    .tab-content #card-template-preview #left-col,.tab-content #card-template-preview #right-col{
        width: 100%;
    }
    .tab-content #card-template-preview #right-col  {
        padding: 60px 20px 24px!important;
        margin: 0;
    }
    .tab-content #card-template-preview #video-div {
        padding-top: 254px !important;
    }
} */

.tab-content #card-template-preview #right-col {
    padding: 0;
    margin: 0;
}
#right-col #tinymce-heading {
    max-height: 104px;
    margin-bottom: 20px;
    padding: 0 40px 0 50px;
}

.tab-content #card-template-preview #tinymce-body {
    margin: 0;
    max-height: 455px;
    min-height: 455px;
    padding: 0 40px 0 50px;
}