.root
{
	background-color: white;
	padding: 0% 5%;
	padding-bottom: 90px;
	margin-bottom: 90px;
}
.intro h1
{
	text-align: center;
    color: #04198B;
    padding-bottom: 15px;
    font-size: 35px;
    line-height: 42px;
    margin-top: 0px;
}
.intro p
{
	text-align: center;
	padding: 0% 10%;
}
.content h2
{
	text-align: :left;
    font-size: 30px;
    padding-bottom: 15px;

}
.content p
{
	text-align: center;
}
.body_part h2
{
	text-align: center;
    font-size: 30px;
    padding-bottom: 15px;
}
.form-check-input 
{
	width: 1.2em;
	height: 1.2em;
	margin-right: 7px;
}
.form-check-label
{
	font-size: 18px;
}
.form_sec .form-control
{
    margin-bottom: 25px;
}

.form-select
{
    margin-bottom: 25px;
}
.currency
{
	text-align: center;
}
.form_start h2
{
	text-align: center;
}
.form_start p
{
	text-align: center;
}
.form_start .form-check-input 
{
	width: 1.2em;
	height: 1.2em;
	margin-right: 15px;
}


 .dropdown .dropdown-menu{ max-height:20px; overflow:auto; }

        .content {
            text-align: center;
            padding: 0px 160px 0px 160px;
        }

        .box-readonly {
            border: 1px solid #ccc;
        }

        .readonly-header {
            padding: 10px 10px 10px 10px;
            background: #04198c;
            color: #FFF;
            text-align: center;
        }

        .readonly-content {
            background: #FFF;
            padding: 30px 0px 30px 0px;
        }

        .row {
            margin-right: -15px;
            margin-left: -15px;
        }

        .left-info {
            padding: 0px 30px;
        }

        .right-info {
            padding: 0px 40px 0px 25px;
            min-height: 150px;
            height: auto;
        }

        .border-left {
            border-left: 1px dotted #ccc;
        }

        .left-info h1 {
            margin: 0px 0px;
            font-size: 34px;
            line-height: 24px;
        }

        .currency-text {
            padding-bottom: 15px;
        }

        .total-amount-number {
            background-color: #04198c;
            text-align: center;
            color: #FFF;
            font-size: 14px;
            padding: 10px 0px;
            font-family: "Noto Sans Light";
            margin-bottom: 10px;
        }

        .total-amount-word {
            background-color: #04198c;
            text-align: center;
            color: #FFF;
            font-size: 15px;
            padding: 10px 0px;
            font-family: "Noto Sans Light";
            padding: 10px 10px;
        }

        .continue-btn {
            width: 135px;
            height: 45px;
            background-color: #00CEFF;
            color: #002581;
            border: 0px;
            margin-top: 30px;
            margin-left: 0px;
            font-size: 17px;
            font-family: "Noto Sans Light";
            text-align: center;
            border-radius: 4px;
        }

        @media only screen and (min-width: 776px) and (max-width: 850px) {
            .content {
                text-align: center;
                padding: 10px 0px 10px 0px;
            }

            .left-info {
                padding: 0px 30px 20px 30px;
            }

            .total-amount-number {
                background-color: #00CEFF;
                text-align: center;
                color: #FFF;
                font-size: 15px;
                padding: 10px 0px;
                font-family: "Noto Sans Light";
                margin-bottom: 10px;
            }

            .total-amount-word {
                background-color: #00CEFF;
                text-align: center;
                color: #FFF;
                font-size: 15px;
                padding: 10px 0px;
                font-family: "Noto Sans Light";
                padding: 10px 10px;
            }
        }

        @media only screen and (min-width: 375px) and (max-width: 414px) {
            .content {
                text-align: center;
                padding: 10px 0px 10px 0px;
            }

            .left-info {
                padding: 0px 30px 20px 30px;
            }

            .left-info h1 {
                margin: 0px 0px;
                font-size: 34px;
                line-height: 24px;
            }

            .right-info {
                padding: 0px 25px 0px 25px;
                min-height: 150px;
                height: auto;
            }

            .total-amount-number {
                background-color: #00CEFF;
                text-align: center;
                color: #FFF;
                font-size: 15px;
                padding: 10px 0px;
                font-family: "Noto Sans Light";
                margin-bottom: 10px;
            }

            .total-amount-word {
                background-color: #00CEFF;
                text-align: center;
                color: #FFF;
                font-size: 15px;
                padding: 10px 0px;
                font-family: "Noto Sans Light";
                padding: 10px 10px;
            }
        }
        
        @media only screen and (max-width: 768px) {
    .root {
        padding: 10px; /* Adjust padding for smaller screens */
        margin-bottom: 30px; /* Reduce margin for smaller screens */
    }

    .intro h1 {
        font-size: 28px; /* Reduce font size for smaller screens */
        padding-bottom: 10px; /* Reduce padding for smaller screens */
    }

    .intro p {
        padding: 0% 5%; /* Adjust padding for smaller screens */
    }

    .content h2 {
        font-size: 24px; /* Reduce font size for smaller screens */
        padding-bottom: 10px; /* Reduce padding for smaller screens */
    }

    .form-check-input {
        width: 1em; /* Adjust width for smaller screens */
        height: 1em; /* Adjust height for smaller screens */
        margin-right: 5px; /* Reduce margin for smaller screens */
    }

    .form-check-label {
        font-size: 16px; /* Reduce font size for smaller screens */
    }

    .form_sec .form-control {
        margin-bottom: 15px; /* Adjust margin for smaller screens */
    }

    .form-select {
        margin-bottom: 15px; /* Adjust margin for smaller screens */
    }

    .currency {
        text-align: center;
    }
    
    @media only screen and (min-width: 390px) and (max-width: 428px) and (min-resolution: 2dppx) 
{
        .root 
    {
        padding: 5%; /* Adjust padding for iPhone 13 */
        padding-bottom: 60px; /* Reduce padding for iPhone 13 */
        margin-bottom: 60px; /* Reduce margin for iPhone 13 */
    }

    .intro h1 {
        font-size: 24px; /* Reduce font size for iPhone 13 */
        padding-bottom: 5px; /* Reduce padding for iPhone 13 */
    }

    .content h2 {
        font-size: 28px; /* Adjust font size for iPhone 13 */
        padding-bottom: 10px; /* Reduce padding for iPhone 13 */
    }

    /* Adjust other styles as needed for iPhone 13 */
}
        
/* Carousel Styles */
.carousel-indicators .active {
    background-color: #2980b9;
}

.carousel-inner img {
    width: 100%;
    max-height: 460px
}

.carousel-control {
    width: 0;
}

.carousel-control.left,
.carousel-control.right {
	opacity: 1;
	filter: alpha(opacity=100);
	background-image: none;
	background-repeat: no-repeat;
	text-shadow: none;
}

.carousel-control.left span {
	padding: 15px;
}

.carousel-control.right span {
	padding: 15px;
}

.carousel-control .glyphicon-chevron-left, 
.carousel-control .glyphicon-chevron-right, 
.carousel-control .icon-prev, 
.carousel-control .icon-next {
	position: absolute;
	top: 45%;
	z-index: 5;
	display: inline-block;
}

.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
	left: 0;
}

.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
	right: 0;
}

.carousel-control.left span,
.carousel-control.right span {
	background-color: #000;
}

.carousel-control.left span:hover,
.carousel-control.right span:hover {
	opacity: .7;
	filter: alpha(opacity=70);
}

/* Carousel Header Styles */
.header-text {
    position: absolute;
    top: 20%;
    left: 1.8%;
    right: auto;
    width: 96.66666666666666%;
    color: #fff;
}

.header-text h2 {
    font-size: 40px;
}

.header-text h2 span {
    background-color: #2980b9;
	padding: 10px;
}

.header-text h3 span {
	background-color: #000;
	padding: 15px;
}

.btn-min-block {
    min-width: 170px;
    line-height: 26px;
}

.btn-theme {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    margin-right: 15px;
}

.btn-theme:hover {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}
