body,
html {
margin: 0;
padding: 0;
height: 100%;
/* background-color: #ffffff; */
/* background-image: url("../images/bg42.jpeg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover; */
/* background-color: #E7EFF2; */
}
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* ///////////////////////////////////////////// HEADER ////////////////////////////// */
.header {
width: 100%;
height: 80px;
background-color:transparent;
text-align: center;
}
.header_county_text {
/* color:#1d3ea0; */
/* color:#336c9f; */
color: #e99403;
/* text-shadow: 1px 2px 3px #eee, 0 0 0 #797979, 1px 2px 3px #eee; */
font-size: 26px;
font-family: 'saira', serif;
/* font-style: italic; */
font-weight: 500;
}
/* ------------------------------------------------------------ */
/* // keep icon left and right */
.left_side {
float: left;
margin-top: 24px;
margin-left: 11.5px;
user-select: none;
}
.right_side {
float: right;
margin-top: 32px;
user-select: none;
}
/* .center_side {
margin-top: 8px;
} */
/* // 3 div in one row */
.container {
display: flex;
justify-content: space-between;
width: 100%;
height: 50px;
/* Adjust the height as needed */
/* background-color: #ccc; */
}
.section {
flex: 1;
height: 100%;
/* border: 1px solid #999; */
box-sizing: border-box;
}
/* ============ */
.home_icon:before {
font-family: FontAwesome;
font-size: 29px;
color: #e99403;
/* text-shadow: 1px 2px 3px #eee, 0 0 0 #797979, 1px 2px 3px #eee; */
/* text-shadow: 1px 2px 3px #dddddd, 0 0 0 #797979, 1px 2px 3px #dddddd; */
content: '\f015';
cursor: pointer;
transition: 0.5s;
padding-right: 15px;
}
.home_icon:hover:before {
/* background-color: rgb(230, 226, 226); */
color: rgb(125, 125, 125);
}
.create_icon:before {
font-family: FontAwesome;
font-size: 25px;
color: #e99403;
/* text-shadow: 1px 2px 3px #dddddd, 0 0 0 #797979, 1px 2px 3px #dddddd; */
/* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
content: '\f014';
cursor: pointer;
transition: 0.5s;
padding-right: 13px;
}
.create_icon:hover:before {
/* background-color: rgb(230, 226, 226); */
color: rgb(125, 125, 125);
}
.join_icon:before {
font-family: FontAwesome;
font-size: 32px;
color:#FFA000;
/* text-shadow: 1px 2px 3px #eee, 0 0 0 #797979, 1px 2px 3px #eee; */
content: '\f234';
cursor: pointer;
transition: 0.5s;
padding-right: 20px;
}
/* /////////////////////////////////////// topic /////////////////////////////////// */
.counter_topic {
font-family: 'Montserrat', sans-serif;
font-size: 45px;
color: rgb(94, 79, 44);
margin-top: 50px;
margin-left: auto;
margin-right: auto;
justify-content: center;
text-align: center;
}
/* /////////////////////////////////////// join code /////////////////////////////// */
.counter_joincode {
font-family: 'Rubik', sans-serif;
font-size: 20px;
/* color: #9d9b9b; */
color: #b8b5b5;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
justify-content: center;
/* display:flex; */
}
.counter_joincode_2 {
font-family: 'arial', sans-serif;
font-size: 11px;
/* color: #9d9b9b; */
color: #c39443;
margin-top: 14px;
letter-spacing: 1px;
margin-left: auto;
margin-right: auto;
justify-content: center;
/* display:flex; */
}
/* /////////////////////////////////////// count message info delete /////////////////////////////// */
.counter_option {
/* font-family: 'Rubik', sans-serif; */
/* font-size: 35px; */
/* color: #9d9b9b; */
color: #7c7979;
margin-top: 28px;
/* margin-left: auto;
margin-right: auto; */
justify-content: center;
display: flex;
/* background-color: red; */
text-align: center;
}
.counter_option2 {
/* font-family: 'Rubik', sans-serif; */
/* font-size: 35px; */
/* color: #9d9b9b; */
color: #7c7979;
margin-top: 15px;
/* margin-left: auto;
margin-right: auto; */
justify-content: center;
display: flex;
/* background-color: red; */
text-align: center;
}
/* ////////////////////////////////////////// FORM //////////////////////////////////// */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
align-items: center;
justify-content: center;
}
/* Style for the popup box */
.popup {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
width: 310px;
}
.dataInput {
width: 300px;
padding: 12px 20px;
margin-top: 1px;
margin-bottom: 8px;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
.dataInput:focus {
border: 3px solid #555;
}
/* .captchaspace {
width: 300px;
height: 60px;
} */
.display_inline {
display: inline-block;
vertical-align: middle; /* Ensures both elements align vertically */
}
.captchaBox {
color: #555;
width: 95px;
text-align: center;
height: 39px;
line-height: 40px;
letter-spacing: 2px;
background-color: #ccc;
border: 3px solid #ccc;
transition: 0.5s;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
user-select: none;
display: inline-block;
vertical-align: middle; /* Ensures both elements align vertically */
}
.captcha {
width: 150px;
padding: 12px 19px;
border: 3px solid #ccc;
transition: 0.5s;
outline: none;
margin-left: 1px;
display: inline-block;
vertical-align: middle; /* Ensures both elements align vertically */
}
.captcha:focus {
border: 3px solid #555;
}
.button {
background: #FFA000;
/* background: linear-gradient(0deg, rgba(33,64,95,1) 0%, rgba(67,100,133,1) 100%, rgba(33,64,95,1) 100%); */
border: none;
color: white;
padding: 11px 37px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 8px;
transition: 0.5s;
}
.create_a_county {
width: 100%;
text-align: center;
font-family: 'saira', sans-serif;
font-size: 25px;
color: #FFA000;
padding-left: 3px;
}
.error_message_create {
color: red;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.loader {
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #2f3030;
width: 20px;
height: 20px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* //////////////////////////////////////////// COUNTER AND ARROW ///////////////////////////////////////// */
.counter_number {
/* text-shadow: 1px 0px 1px rgba(35, 0, 0, 0.63); */
font-family: 'Orbitron', sans-serif;
/* font-size: 174px; */
color: #7c7979;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
user-select: none;
/* background-color: #ededed; */
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.left_number_side,
.right_number_side {
font-size: 174px;
color: #ecc279;
text-shadow: 1px 2px 3px #eee, 0 0 0 #534c4c, 1px 2px 3px #eee;
cursor: pointer;
/* text-shadow: 1px 0px 2px rgba(35, 0, 0, 0.67); */
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.center_number_side {
font-size: 174px;
/* font-weight :150; */
/* text-shadow: 1px 0px 2px rgba(35, 0, 0, 0.67); */
}
.left_number_side:active {
color: rgb(61, 40, 40);
}
.right_number_side:active {
color: rgb(61, 40, 40);
}
@media screen and (max-width: 480px) {
.center_number_side {
font-size: 109px;
}
.left_number_side,
.right_number_side {
font-size: 134px;
}
}
/* //////////////////////////////////////////// INFO ///////////////////////////////////////// */
.counter_info {
margin-top: 5px;
margin-left: auto;
margin-right: auto;
justify-content: center;
/* display: flex; */
display: none;
/* background-color: #b8b5b5; */
}
.userpass {
font-family: 'Orbitron', sans-serif;
/* font-size: 174px; */
color: #7c7979;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
text-align: center;
/* user-select: none; */
}
.userpass td {
/* border: 1px solid #cccbcb; */
padding: 4px;
/* text-align: center; */
/* font-size: 20px; */
}
.table_title {
text-align: right;
font-family: 'Nunito Sans', sans-serif;
font-size: 20px;
color:#2e2071;
}
.table_title_content {
text-align: left;
font-family: 'inter', sans-serif;
font-size: 18px;
color: rgb(109, 106, 106);
}
.table_head{
text-align: left;
font-family: 'inter', sans-serif;
font-size: 22px;
color: rgba(73, 69, 69, 0.84);
font-weight:600;
}
.table_tail{
text-align: left;
font-family: 'inter', sans-serif;
font-size: 14px;
color: rgba(73, 69, 69, 0.84);
/* font-weight:600; */
}
/* //////////////////////////////////////////// MESSAGE BOX AND BUTTON /////////////////////////////// */
.counter_message {
margin-top: 3px;
margin-left: auto;
margin-right: auto;
justify-content: center;
/* display: flex; */
display: none;
}
.charCount {
margin-top: 40px;
margin-left: auto;
margin-right: auto;
justify-content: center;
/* display: flex; */
display: none;
color: #7c7979;
/*
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 13px; */
}
.charCountname {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #7c7979;
font-size: 13px;
}
.counter_message_submit {
margin-top: 5px;
margin-left: auto;
margin-right: auto;
justify-content: center;
width: 320px;
/* display: flex; */
display: none;
}
.counter_message_submit:hover {
/* border-bottom: 1px solid rgb(246, 220, 160); */
outline: none;
}
/* .container {
display: flex;
align-items: center;
} */
.message-textarea {
background-color: #fafafa;
padding: 10px;
border: 0px;
min-width: 300px;
min-height: 18px;
resize: none;
overflow-y: hidden;
border-bottom: 1px solid rgb(238, 211, 157);
transition: 0.5s;
color:#4d4b4b;
}
.message-textarea:focus {
border-bottom: 1px solid rgb(246, 220, 160);
background-color: #fefefe;
outline: none;
}
.counter_message2 {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
justify-content: center;
/* display: flex; */
/* display:none; */
}
.message-textarea2 {
background-color: #fefcf3;
padding: 10px;
border: 0px;
min-width: 300px;
height: 18px;
resize: none;
overflow-y: hidden;
border: rgb(231, 228, 225) 1px solid;
transition: 0.5s;
color:#4d4b4b;
/* pointer-events: none; */
}
.message-textarea2:focus {
outline: none;
/* border: #212427 2px solid; */
}
/* CSS */
.button-4 {
appearance: none;
background-color: #ffffff;
border: 1px solid #f4e4c7;
border-radius: 14px;
box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
box-sizing: border-box;
color: #9f824c;
cursor: pointer;
display: inline-block;
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 14px;
font-weight: 400;
line-height: 20px;
list-style: none;
padding: 6px 16px;
position: relative;
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
word-wrap: break-word;
width: 90px;
margin-left: 4px;
}
.button-4:hover {
background-color: #F3F4F6;
text-decoration: none;
transition-duration: 0.1s;
}
.button-4:disabled {
background-color: #FAFBFC;
border-color: rgba(27, 31, 35, 0.15);
color: #959DA5;
cursor: default;
}
.button-4:active {
background-color: #EDEFF2;
box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
transition: none 0s;
}
.button-4:focus {
outline: 1px transparent;
}
.button-4:before {
display: none;
}
.button-4:-webkit-details-marker {
display: none;
}
/* //////////////////////////// EDIT */
.button-edit {
background-color: #ddd;
border: none;
color: black;
padding: 5px 10px;
text-align: center;
text-decoration: none;
cursor: pointer;
border-radius: 16px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #7c7979;
font-size: 13px;
letter-spacing: 2px;
margin-left: 12px;
}
.button-edit:hover {
background-color: #f1f1f1;
}
.counter_custom_div {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
justify-content: center;
display:flex;
}
.counter_custom{
margin-top: 40px;
margin-left: auto;
margin-right: auto;
justify-content: center;
/* width: 320px; */
/* display: flex; */
display: none;
/* background-color: #783c3c; */
}
.counter-custom-number{
width: 25%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
transition: 0.5s;
border-bottom: 1px solid rgb(238, 211, 157);
border-radius: 1px;
/* box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset; */
background-color: #fafafa;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #7c7979;
font-size: 28px;
}
.counter-custom-number:focus {
border-bottom: 1px solid rgb(246, 220, 160);
background-color: #fefefe;
outline: none;
}
.counter-custom-submit{
appearance: none;
background-color: #ffffff;
border: 1px solid rgb(238, 211, 157);
border-radius: 1px;
/* box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset; */
/* box-sizing: border-box; */
color: #522b18;
cursor: pointer;
/* display: inline-block; */
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 14px;
/* font-weight: 500; */
/* line-height: 20px; */
list-style: none;
/* padding: 6px 6px; */
height: 58px;
width: 100px;
margin-left: 10px;
margin-top: 8px;
}
.counter-custom-submit:hover {
border-bottom: 1px solid rgb(246, 220, 160);
outline: none;
}
/* //////////////title/////////////// */
.counter_title_custom{
margin-top: 40px;
margin-left: auto;
margin-right: auto;
justify-content: center;
/* width: 320px; */
/* display: flex; */
display: none;
/* background-color: #783c3c; */
}
.counter-custom-title-number{
width: 45%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
transition: 0.5s;
border-bottom: 1px solid rgb(238, 211, 157);
border-radius: 1px;
/* box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset; */
/* background-color: transparent; */
background-color: #fafafa;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #7c7979;
font-size: 28px;
}
.counter-custom-title-number:focus {
border-bottom: 1px solid rgb(246, 220, 160);
background-color: #fefefe;
outline: none;
}
.counter-custom-title-submit{
appearance: none;
background-color: #ffffff;
border: 1px solid rgb(238, 211, 157);
border-radius: 1px;
/* box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset; */
/* box-sizing: border-box; */
color: #522b18;
cursor: pointer;
/* display: inline-block; */
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 14px;
/* font-weight: 500; */
/* line-height: 20px; */
list-style: none;
/* padding: 6px 6px; */
height: 58px;
width: 100px;
margin-left: 10px;
margin-top: 8px;
}
.counter-custom-title-submit:hover {
border-bottom: 1px solid rgb(246, 220, 160);
outline: none;
}
.frame{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 80px;
width: 350px;
position: relative;
/* background-color: #4d4b4b; */
/* box-shadow:
-7px -7px 20px 0px rgba(255, 255, 255, 0.3),
-4px -4px 5px 0px rgba(255, 255, 255, 0.326),
7px 7px 20px 0px rgba(232, 226, 226, 0.677),
4px 4px 5px 0px #fff9,
inset 0px 0px 0px 0px #fff9,
inset 0px 0px 0px 0px #0001,
inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001; */
transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
border-radius: 1px;
}
.btn{
height: 55px;
width: 65px;
border-radius: 4px;
background: #edeef0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* -webkit-tap-highlight-color: rgba(0,0,0,0); */
/* -webkit-tap-highlight-color: transparent; */
box-shadow:
-7px -7px 20px 0px rgba(255, 255, 255, 0.915),
-4px -4px 5px 0px rgba(255, 255, 255, 0.881),
7px 7px 20px 0px rgb(226, 224, 224),
4px 4px 5px 0px rgba(214, 213, 213, 0.947),
inset 0px 0px 0px 0px rgba(255, 255, 255, 0.915),
inset 0px 0px 0px 0px rgba(218, 216, 216, 0.812),
inset 0px 0px 0px 0px rgba(255, 255, 255, 0.825),
inset 0px 0px 0px 0px rgba(246, 243, 243, 0.877);
transition:box-shadow 0.6s cubic-bezier(.79,.21,.06,.81);
font-size: 16px;
color: rgba(42, 52, 84, 1);
text-decoration: none;
padding-top: 5px;
margin-left:10px ;
}
.btn:active{
box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5),
-4px -4px 6px 0 rgba(116, 125, 136, .2),
inset -4px -4px 6px 0 rgba(255,255,255,.5),
inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}
.btn-content{
padding-top: 5px;
font-size: 10px;
font-family: 'saira', serif;
/* font-style: italic; */
user-select: none;
/* font-style: italic; */
font-weight: 400;
color: rgb(78, 82, 94);
}
.icon-sort {
width: 20px; /* Adjust the width as needed */
height: 20px; /* Adjust the height as needed */
fill: currentColor; /* This allows the SVG to inherit the text color */
color: rgb(239, 184, 72);
}
.icon-sort-black {
width: 20px; /* Adjust the width as needed */
height: 20px; /* Adjust the height as needed */
fill: currentColor; /* This allows the SVG to inherit the text color */
color: rgb(239, 184, 72);
}
.icon-sort-message-blue {
width: 26px; /* Adjust the width as needed */
height: 26px; /* Adjust the height as needed */
fill: currentColor; /* This allows the SVG to inherit the text color */
color:#2d84badb;
padding-top: 1px;
}
.icon-sort-close-blue {
width: 19px; /* Adjust the width as needed */
height: 19px; /* Adjust the height as needed */
fill: currentColor; /* This allows the SVG to inherit the text color */
/* color:#d2d2d3fe; */
color:#2d84badb;
padding-top: 4.2px;
}