@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,600|PT+Sans:400|Roboto:400,500&lang=th');

body{
    width: 100%;
    min-height: 100vh;
    margin: 0;
    font-family: "Poppins",sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}

#viewer {
    overflow: hidden;
    height: 100vh;
    position: absolute;
    width: 100vw;
    z-index: 99;
}

a:not(.nostylea) {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}

.zoom-btn {
    color: white;
    font-family: "Montserrat",sans-serif;
    font-size: 20px;
    margin: 0 20px 0 auto;
    background: #2a6dd8;
    padding: 10px 20px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
}

.container {
    max-width: 1140px;
}

.ads {
    /*border: 0.5px solid red;*/
}

.btn-header {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-family: "Montserrat",sans-serif;
    letter-spacing: 0;
    font-size: 14px;
    width: 144px;
    height: 35px;
    letter-spacing: 0.5px;
}

.btn-choose-plan {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-family: "Montserrat",sans-serif;
    letter-spacing: 0;
    font-size: 14px;
    width: 185px;
    height: 35px;
    letter-spacing: 0.5px;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-login {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-sign {
    background-color: #007bff;
    border-color: #007bff;
}

.badge-success {
    color: #fff;
    background-color: #28a745;
    padding-right: 0.6em;
    padding-left: 0.6em;
    border-radius: 10rem;
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}

.progressbarinner {
    background-color: #3D85FD;
    width: 100%;
    background-image:
            linear-gradient(317deg,
                rgb(100,157,253) 25%, transparent 25%,
                transparent 50%, rgb(100,157,253) 50%,
                rgb(100,157,253) 75%, transparent 75%,
                transparent
            );
    animation: fill-bar 60s forwards;
}

.convertbtn.disabled {
    background-color: #cdcdcd;
}

.text-h-blue {
    color: #3D85FD;
}

/*#ezoic-pub-ad-placeholder-122, #ezoic-pub-ad-placeholder-121, #ezoic-pub-ad-placeholder-120 {*/
/*    border: 1px solid red;*/
/*    width: 336px;*/
/*    height: 280px;*/
/*}*/

@keyframes fill-bar {
    from {width: 0%;}
    to {width: 95%;}
}

@media only screen and (max-width: 600px) {
    
}

.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    position: absolute;
    background: rgb(0 0 0 / 60%);
    z-index: 99;
    width: 100%;
}

.modal > .modal-content > .close {
    padding: 8px;
    position: absolute;
    right: 0;
    width: 100%;
    text-align: right;
    top: -2px;
}

.modal.hidden {
    display: none !important;
}

.modal > .modal-content {
    background: white;
    margin: 0 auto;
    border-radius: 0.3rem;
    padding: 20px;
    border: 0;
    position: relative;
}

@media only screen and (max-width: 600px) {
    .modal > .modal-content {
        width: 90%;
    }
}/******************************************/
/*****           BG COLORS            s*****/
/******************************************/
.bg-red-1{ background-color: #EF5350; }
.bg-red-2{ background-color: #F44336; }
.bg-red-3{ background-color: #E53935; }
.bg-red-4{ background-color: #D32F2F;}
.bg-red-5{ background-color: #C62828; }
.bg-red-6{ background-color: #B71C1C; }

.bg-orange-1{ background-color: #FFA726; }
.bg-orange-2{ background-color: #FF9800; }
.bg-orange-3{ background-color: #FB8C00; }
.bg-orange-4{ background-color: #F57C00}
.bg-orange-5{ background-color: #EF6C00; }
.bg-orange-6{ background-color: #E65100; }

.bg-yellow-1{ background-color: #FFEE58; }
.bg-yellow-2{ background-color: #FFEB3B; }
.bg-yellow-3{ background-color: #FDD835; }
.bg-yellow-4{ background-color: #FBC02D; }
.bg-yellow-5{ background-color: #F9A825; }
.bg-yellow-6{ background-color: #F57F17; }

.bg-green-1{ background-color: #66BB6A; }
.bg-green-2{ background-color: #4CAF50; }
.bg-green-3{ background-color: #43A047; }
.bg-green-4{ background-color: #388E3C; }
.bg-green-5{ background-color: #2E7D32; }
.bg-green-6{ background-color: #1B5E20; }

.bg-blue-1{ background-color: #42A5F5; }
.bg-blue-2{ background-color: #2196F3; }
.bg-blue-3{ background-color: #1E88E5; }
.bg-blue-4{ background-color: #1976D2; }
.bg-blue-5{ background-color: #1565C0; }
.bg-blue-6{ background-color: #0D47A1; }

.bg-purple-1{ background-color: #AB47BC; }
.bg-purple-2{ background-color: #9C27B0; }
.bg-purple-3{ background-color: #8E24AA; }
.bg-purple-4{ background-color: #7B1FA2; }
.bg-purple-5{ background-color: #6A1B9A; }
.bg-purple-6{ background-color: #4A148C; }

.bg-pink-1{ background-color: #EC407A; }
.bg-pink-2{ background-color: #E91E63; }
.bg-pink-3{ background-color: #D81B60; }
.bg-pink-4{ background-color: #C2185B; }
.bg-pink-5{ background-color: #AD1457; }
.bg-pink-6{ background-color: #880E4F; }

.color-red { color: #ea515b; }

.textoverflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}  
@media only screen and (max-width: 767px) {
    .dropdown-convert {
        border: 1px solid #e4e4e4;
        padding: 20px;
        width: 90%;
        position: relative;
        top: -20px;
        z-index: 99;
        background: white;
    }
}

/* .adsrunnning > div {
    width: 400px;
    height: 100px;
} */

/* All placeholders: reserve space to prevent layout shift */
/* [id^="ezoic-pub-ad-placeholder-"] {
  min-height: 400px;
} */

/* Sidebar placements often allow taller half-page units */
/* aside [id^="ezoic-pub-ad-placeholder-"] {
  min-height: 600px;
} */

/* Mobile typically serves taller in-content units */
/* @media (max-width: 768px) {
  [id^="ezoic-pub-ad-placeholder-"] {
    min-height: 600px;
  }
} */