/**
 * Stylesheet for Berthing Energy Calculation Tool
 */

.berth_form_section {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}

.title_section h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.form_section input {
    margin-bottom: 15px;
    padding: 10px;
}

.btn_nc {
    text-align: center;
}


.berth_calculation_section {
    padding: 5rem 0;
}


.title_section h1 {
    font-size: 2rem;
    color: var(--colorMain);
    margin-bottom: 1rem;
}

.title_section p {
    font-size: 1rem;
    color: var(--colorSub);
}

.berth_form label {
    font-weight: bold;
    color: var(--colorMain);
    margin-top: 15px;

}

.berth_form input,
.berth_form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.form-control {
    background-color: var(--colorLight);
    border: 1px solid var(--colorMain);
}

.select_ar {
    position: relative;
}

.select_icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: var(--colorMain);
}


.d-ac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
		background:var(--colorSub);
		padding:10px;
		border-radius:15px

}

.d-ac input {
		width:100%;
    display: block;
}

.d-ac span{
    display: contents;
		margin:-20px auto 10px auto;
}

span.error_message{
    display: block;
    color: red;
    width: 100%;
		margin:-5px auto 10px auto;
}

.span_rig {
    font-weight: bold;
    color: var(--colorMain);
}

.select_ar select {
    padding-right: 30px;
}

.berth_title {
    font-size: 1.5rem;
    color: var(--colorHeading);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.pageLoader {
    text-align: center;
    margin: 2rem 0;
}

.pageLoader img {
    width: 50px;
}

.clear_btn button {
    background-color: var(--colorMain);
    color: var(--colorLight);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.clear_btn button:hover {
    background-color: #123c68;
}

input[disabled] {
    background-color: #f9f9f9;
    cursor: not-allowed;
}


.pos_sti {
    text-align: center;
}

@media (max-width: 768px) {
    .berth_form input,
    .berth_form select {
        padding: 8px;
    }

    .select_icon {
        right: 5px;
    }

    .clear_btn button {
        width: 100%;
    }
}



.pageLoader{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
}

.pageLoader:before{
position:absolute;
background:rgba(73, 80, 87, 0.4);
display:block;
width:100vw;
height:100vh;
content:"";
}

.pageLoader span{
top:50%;
position:fixed;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: conic-gradient(#0000 10%,#16437E);
   -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 0);
   animation: spinner-zp9dbg 1s infinite linear;

}

@keyframes spinner-zp9dbg {
   to {
      transform: rotate(1turn);
   }
}