/* Importing fonts from Google */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');



 /* Reseting */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
 }




 button {
     border: 0;
 }

 button:hover img {
     position: relative;
     transform: scale(2.5);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     z-index: 1;
 }

 body {
    /*background: linear-gradient(315deg, hsla(212, 95%, 40%, 1) 70%, hsla(0, 0%, 96%, 1) 86%);*/

     background: linear-gradient(315deg, hsla(212, 95%, 40%, 1) 70%, hsla(0, 0%, 96%, 1) 90%);
   
 }

/* Heading*/
.heading{
    color:white; 
    margin-top: 10px;}


 body::-webkit-scrollbar {
     display: none;
 }

 .wrapper {
     /*max-width: 800px;*/
     margin: 20px auto;
     padding: 30px 45px;
     box-shadow: 5px 25px 35px #4c519e9d;
 }

 .wrapper label {
     display: block;
     padding-bottom: 0.2rem;
 }

 .wrapper .form .row {
     padding: 0.6rem 0;
 }

 .wrapper .form .row .form-control {
     box-shadow: none;
 }

 .wrapper .form .option {
     position: relative;
     padding-left: 20px;
     cursor: pointer;
 }


 .wrapper .form .option input {
     opacity: 0;
 }

 .wrapper .form .option1 {
     position: relative;
     padding-left: 20px;
     cursor: pointer;
 }


 .wrapper .form .option1 input {
     opacity: 0;
 }

 .wrapper .form .option .checkmark {
     position: absolute;
     top: 1px;
     left: 0;
     height: 20px;
     width: 20px;
     border: 1px solid #bbb;
     border-radius: 50%;
 }

 .wrapper .form .option1 .checkmark {
     position: absolute;
     top: 1px;
     left: 0;
     height: 20px;
     width: 20px;
     border: 1px solid #bbb;

 }

 .wrapper .form .option input:checked~.checkmark:after {
     display: block;
 }

 .wrapper .form .option:hover .checkmark {
     background: #f3f3f3;
 }

 .wrapper .form .option .checkmark:after {
     content: "";
     width: 10px;
     height: 10px;
     display: block;
     /*background: linear-gradient(45deg, #ce1e53, #8f00c7);*/
     background: #f7642d;
     position: absolute;
     top: 50%;
     left: 50%;
     border-radius: 50%;
     transform: translate(-50%, -50%) scale(0);
     transition: 300ms ease-in-out 0s;
 }

 .wrapper .form .option1 input:checked~.checkmark:after {
     display: block;
 }

 .wrapper .form .option1:hover .checkmark {
     background: #f3f3f3;
 }

 .wrapper .form .option1 .checkmark:after {
     content: "";
     width: 10px;
     height: 10px;
     display: block;
     /*background: linear-gradient(45deg, #ce1e53, #8f00c7);*/
     background: #f7642d;
     position: absolute;
     top: 50%;
     left: 50%;

     transform: translate(-50%, -50%) scale(0);
     transition: 300ms ease-in-out 0s;
 }

 .wrapper .form .option input[type="radio"]:checked~.checkmark {
     background: #fff;
     transition: 300ms ease-in-out 0s;
 }

 .wrapper .form .option input[type="radio"]:checked~.checkmark:after {
     transform: translate(-50%, -50%) scale(1);
 }

 .wrapper .form .option1 input[type="checkbox"]:checked~.checkmark {
     background: #fff;
     transition: 300ms ease-in-out 0s;
 }

 .wrapper .form .option1 input[type="checkbox"]:checked~.checkmark:after {
     transform: translate(-50%, -50%) scale(1);
 }

 #sub {
     display: block;
     width: 100%;
     border: 1px solid #ddd;
     padding: 10px;
     border-radius: 5px;
     color: #333;
 }

 #sub:focus {
     outline: none;
 }

 @media(max-width: 768.5px) {
     .wrapper {
         margin: 30px;
     }

     .wrapper .form .row {
         padding: 0;
     }
 }

 @media(max-width: 400px) {
     .wrapper {
         padding: 25px;
         margin: 20px;

     }
 }
 @media(max-width: 767px) {
    .heading{
        color:red;
      }
    
}
 
 .upload_hide {
     width: 100%;
     height: 100%;
     position: absolute;
     background-color: red;
     opacity: 0;

 }

 .upload_label {
     position: absolute;
     width: auto;
     height: auto;
     border: 2px dashed #139CFF;
     text-align: center;
     border-radius: 8px;

 }

 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 /* Firefox */
 input[type=number] {
     -moz-appearance: textfield;
 }

 .covers {
     float: left;
 }


 /*pagination*/
 .pagination {
     display: inline-block;
     padding-left: 0;
     margin: 20px 0;
     border-radius: 4px
 }

 .pagination>li {
     display: inline
 }

 .pagination>li>a,
 .pagination>li>span {
     position: relative;
     float: left;
     padding: 6px 12px;
     margin-left: -1px;
     line-height: 1.42857143;
     color: #337ab7;
     text-decoration: none;
     background-color: #fff;
     border: 1px solid #ddd
 }

 .pagination>li:first-child>a,
 .pagination>li:first-child>span {
     margin-left: 0;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px
 }

 .pagination>li:last-child>a,
 .pagination>li:last-child>span {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px
 }

 .pagination>li>a:focus,
 .pagination>li>a:hover,
 .pagination>li>span:focus,
 .pagination>li>span:hover {
     color: #23527c;
     background-color: #eee;
     border-color: #ddd
 }

 .pagination>.active>a,
 .pagination>.active>a:focus,
 .pagination>.active>a:hover,
 .pagination>.active>span,
 .pagination>.active>span:focus,
 .pagination>.active>span:hover {
     /*z-index: 2;*/
     color: #fff;
     cursor: default;
     background-color: #337ab7;
     border-color: #337ab7
 }

 .pagination>.disabled>a,
 .pagination>.disabled>a:focus,
 .pagination>.disabled>a:hover,
 .pagination>.disabled>span,
 .pagination>.disabled>span:focus,
 .pagination>.disabled>span:hover {
     color: #777;
     cursor: not-allowed;
     background-color: #fff;
     border-color: #ddd
 }

 .pagination-lg>li>a,
 .pagination-lg>li>span {
     padding: 10px 16px;
     font-size: 18px
 }

 .pagination-lg>li:first-child>a,
 .pagination-lg>li:first-child>span {
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px
 }

 .pagination-lg>li:last-child>a,
 .pagination-lg>li:last-child>span {
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px
 }

 .pagination-sm>li>a,
 .pagination-sm>li>span {
     padding: 5px 10px;
     font-size: 12px
 }

 .pagination-sm>li:first-child>a,
 .pagination-sm>li:first-child>span {
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px
 }

 .pagination-sm>li:last-child>a,
 .pagination-sm>li:last-child>span {
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px
 }

 /* File Upload*/

 .dropzone {
    border: 2px dashed #139CFF;
    text-align: center;
    padding: 10px;
    /*font-size: 20px;*/
    cursor: pointer;
    border-radius: 8px;
}
.dropzone1 {
    border: 2px dashed #139CFF;
    text-align: center;      
    cursor: pointer;
    border-radius: 8px;
}
.msg {
    
    text-align: center;
    padding: 47px;
    font-size: 20px;
}


.dropzone:hover {
    background-color: #f8f8f8;
}

.file-container {
    display: flex;
    flex-wrap: wrap;
}

.file-item {
    margin: 7px;
    /*padding: 5px;*/
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.file-name {
    margin-left: 5px;
    flex-grow: 1;
}

.delete-button {
    background-color: #ff0000;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.upload-button,.Uploadspinner {
    background-color: #f7642d;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    text-align: center;
    margin: 5px;
}
.error {
    color: red;
    font-size: 90%;
}