@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');





/* ==========================================================================
   #PAGE WRAPPER
   ========================================================================== */
.page-wrapper {
    min-height: 100vh;
}

/* ==========================================================================
   #INPUT
   ========================================================================== */
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}


/* ==========================================================================
   #BODY
   ========================================================================== */
body {
    line-height: 1.7;
    color: rgb(0, 0, 0);
    font-weight: 400;
    font-size: 1.1rem;
    font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background: #ffffff;
    padding-top: 30px;
}

h1, h2, h3, h4, h5, h6 ,p ,label ,input{
    font-family: 'Prompt', sans-serif; }

h1 {
    font-size: 36px;
    margin-top: 20px;
}
@media (max-width: 767px) {
    h1{
        font-size: 30px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    h1 {
        font-size: 40px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    h1 {
        font-size: 50px;
    }
}


h2 {
    font-size: 30px;
    margin-top: 20px;
}
@media (max-width: 767px) {
    h2{
        font-size: 24px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    h2{
        font-size: 34px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    h2{
        font-size: 44px;
    }
}

h3 {
    font-size: 24px;
}

h4 {
    margin-top: 20px;
    font-size: 18px;
}

h5 {
    font-size: 15px;
}

h6 {
    font-size: 13px;
}
/* ==========================================================================
   #SPACING
   ========================================================================== */
.p-t-100 {
    padding-top: 100px;
}

.p-t-180 {
    padding-top: 180px;
}

.p-t-20 {
    padding-top: 20px;
}

.p-t-10 {
    padding-top: 10px;
}

.p-t-30 {
    padding-top: 30px;
}

.p-b-100 {
    padding-bottom: 100px;
}

/* ==========================================================================
   #WRAPPER
   ========================================================================== */
.wrapper {
    margin: 0 auto;
}

.wrapper--w960 {
    max-width: 960px;
}

.wrapper--w780 {
    max-width: 1500px;
}

.wrapper--w680 {
    max-width: 680px;
}

input[type="date" ] {
    padding: 14px;
}

.table-condensed td, .table-condensed th {
    font-size: 14px;
    font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
    font-weight: 400;
}

/* ==========================================================================
   #CARD
   ========================================================================== */
.card {
    overflow: hidden;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #fff;
}

.card-4 {
    background: rgb(255, 255, 255);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    /* border-radius: 50px; */
    -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    /* margin-top: 200px; */
    margin-bottom: 100px;
    padding: 40px;
}


/* ==========================================================================
 #Radio Button
 ========================================================================== */

.radio-2 {
    color: #ff0000;
    /*padding-left: 40%;*/
    display: block;
}

@media (min-width: 320px){
    .radio-2 {
        font-size: 24px;
        /*padding-left: 20%;*/
    }
}

@media (min-width: 375px){
    .radio-2 {
        font-size: 24px;
        /*padding-left: 30%;*/
    }
}

@media (min-width: 768px){
    .radio-2 {
        font-size: 24px;
    }
}

@media (min-width: 1024px){
    .radio-2 {
        font-size: 24px;
    }
}

@media (min-width: 1440px){
    .radio-2 {
        font-size: 24px;
        /*padding-left: 40%;*/
    }
}

@media (min-width: 2560px){
    .radio-2 {
        font-size: 24px;
        padding-left: 40%;
    }
}

/* ==========================================================================
#CHECKBOX Custom Checkboxes
========================================================================== */
.radio-check {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-check:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-check input:checked ~ .checkmark {
    background-color: #2196F3;
}

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

/* Show the indicator (dot/circle) when checked */
.radio-check input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-check .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}


/* ==========================================================================
#Radio Button
========================================================================== */

.radio-3 {
    color: #000000;
    font-family: 'Prompt', sans-serif;
}
@media (min-width: 375px){
    .radio-3 {
        font-size: 24px;
    }
}

@media (min-width: 768px){
    .radio-3 {
        font-size: 24px;
    }
}

@media (min-width: 1024px){
    .radio-3 {
        font-size: 24px;
    }
}

@media (min-width: 1440px){
    .radio-3 {
        font-size: 24px;
    }
}

@media (min-width: 2560px){
    .radio-3 {
        font-size: 24px;
    }
}

/* ==========================================================================
 #IMAGE CENTER
 ========================================================================== */
.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;

}
@media (max-width: 767px) {
    .img-center{
        width: 80%;
    }
}

@media (min-width: 768px) and (max-width: 2560px) {
    .img-center{
        width: 50%;
    }
}

.img-bank{
    margin-top: 0px;
    vertical-align: middle;
}

/* ==========================================================================
#TEXT FRAME
========================================================================== */

.frame-product h3{
    font-size: 20px;
    text-align: center;
}
@media (min-width: 320px){
    .frame-product h3{
        font-size: 20px;
    }
}
@media (min-width: 767px) and (max-width: 2560px){
    .frame-product h3 {
        font-size: 24px;
    }
    .frame-product{
        border:3px;
        border-style:solid;
        border-color:#838383;
        padding: 1em;
        height:520px;
    }
}
@media (min-width: 321px) and (max-width: 766px){
    .frame-product h3 {
        font-size: 18px;
    }
    .frame-product{
        border:3px;
        border-style:solid;
        border-color:#838383;
        padding: 1em;
        height:500px;
    }
}

.frame-product p{
    color: #838383;
    text-align: center;
}
@media (min-width: 320px){
    .frame-product p{
        font-size: 13px;
    }
}

@media (min-width: 1025px) and (max-width: 2560px){
    .frame-product p{
        font-size: 15px;
    }
}

/* ==========================================================================
#BORDER
========================================================================== */
.border{
    border-bottom: 1px solid #EFEFEF;
}

/* ==========================================================================
#SCORE
========================================================================== */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/* ==========================================================================
#List-Video
========================================================================== */

.video-list {
    background-color: #eee;
    width: 100%;
    height: 400px;
    border: 1px dotted black;
    overflow: auto;
    border: hidden;
}

.list-group-item{
    background-color: #cfcfcf;
    text-align: left;
}
.list-group-item-image {
    max-width: 40px;
}