#chartContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vw;
    max-width: 900px;
    max-height: 900px;
    background-image: url(../img/bkg.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: 42%;
    background-position-y: 47%;
}

#sendresult #chartContainer{
    margin-top:50px;
}
canvas {
    display: block;
    position: relative;
    width: 100% !important;  /* Ensure the canvas takes full width */
    height: 100% !important; /* Ensure the canvas takes full height */
    background: transparent;
    top: 0;
}
body {
    display: block;
    /*
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center; */
    width: 1080px;
    height: 1920px;
    text-align: center;
    background-image: url(../img/body-totem.jpg);
    background-size: 1080px 1920px;
    background-repeat: no-repeat;
    /* border: 1px solid #000; */
    overflow: hidden;
    overflow-y: auto;
    min-height: 1920px;
}
.section-item {
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1080px;
    height: 1920px;
    /* margin: 10px; */
    background-color: transparent;
    /* display: block;
    position: absolute; */
    top :0;
    min-height: 1920px;
}
.logo-cariprazine {
    display: block;
    /* top: 70px; */
    width: 487px; 
    height: 120px;
    position: relative;
}

#cover .logo-cariprazine
{
    top: -40px;
}
.title-header {
    display: block;
    position: relative;
    /* top:220px; */
    font-family: 'Montserrat', sans-serif;
    font-size: 33px;
    font-weight: 700;
    color:#58595B;
    margin: 20px;
}
.title-header-thanks {
    display: block;
    position: relative;
    /* top:220px; */
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color:#00737B; ;
    /* margin: 20px; */
    padding-top:10px;
    padding-bottom:10px;
}
.header-btn-group
{
    display: block;
    position: relative;
    /* top: 340px; */
    width: 100%;
    margin: 20px;
}
.header-btn
{
    background-color: transparent;
    width: 100%;
    height: auto;
    /* margin-left: 20px; */
    /* margin-right: 20px; */
    font-size: 24px;
    border-radius: 28px;
    padding: 10px;
    outline: none;          /* Remove any default outline */
    -webkit-appearance: none; /* Disable iOS-specific styling */
    appearance: none; 
    border: 2px solid #000;
    color:#000 !important;
}

.function-btn-group
{
    display: block;
    position: relative;
    width: 100%;
    /* margin: 20px; */
}

.function-btn
{
    background-color: transparent;
    width:40%;
    height: 60px;
    margin-left:20px;
    margin-right:20px;
    font-size:24px;
    border-radius: 28px;
    outline: none;          /* Remove any default outline */
    -webkit-appearance: none; /* Disable iOS-specific styling */
    appearance: none; 
    border: 2px solid #000;
    color:#000 !important;
}
.function-btn.grey
{
    background-color: #58595B;
    color: white;
    font-weight: bold;
}

.btn-group.symptoms
{
    display: block;
    position: relative;
    width: 100%;
    padding: 20px;
    /* margin-left:20% ; */
}

.btn-symptoms
{
    display: block;
    position: relative;
    background-color: transparent;
    width: 100%;
    min-height: 70px;
    /* height: 60px; */
    /* margin-left:20px;
    margin-right:20px; */
    font-size:24px;
    border-radius: 28px;
    border:2px solid;
    text-align: left;
}

.color-positive
{
    border-color: #A82C55;
    color: #A82C55;
}

.color-hostility
{
    border-color: #6F1C39;
    color: #6F1C39;
}
.color-manic
{
    border-color: #4C1E54;
    color: #4C1E54;
}
.color-addiction 
{
    border-color: #BE6C39;
    color: #BE6C39;
}
.color-sleep  
{
    border-color: #977224;
    color: #977224;
}

.color-sleep[addinfo="Hypo"]  
{
    border-color: #2C5A80;
    color: #2C5A80;
}
.color-sleep.btn-symptoms[addinfo="Hypo"]::after
{
    background-color: #2C5A80;
    color: #fff;
}
.color-anxiety[addinfo="Hypo"]  
{
    border-color: #2C5A80;
    color: #2C5A80;
}
.color-anxiety.btn-symptoms[addinfo="Hypo"]::after
{
    background-color: #2C5A80;
    color: #fff;
}


.color-negative 
{
    border-color: #53AAA8;
    color: #53AAA8;
}
.color-selfharm
{
    border-color: #34717A;
    color: #34717A;
}
.color-depressive 
{
    border-color: #16383D;
    color: #16383D;
}
.color-cognitive 
{
    border-color: #748538;
    color: #748538;
}
.color-anxiety 
{
    border-color: #7C4726;
    color: #7C4726;
}

.btn-symptoms::after
{
    content: attr(data-content);
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    /* transform: translate(-50%, -50%); */
    width: 70px;
    height: 100%;
    top: 0;
    line-height: 58px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    text-align: center;
}


.color-positive.btn-symptoms::after
{
    background-color: #A82C55;
    color: #fff;
}

.color-hostility.btn-symptoms::after
{
    background-color: #6F1C39;
    color: #fff;
}
.color-manic.btn-symptoms::after
{
    background-color: #4C1E54;
    color: #fff;
}
.color-addiction.btn-symptoms::after
{
    background-color: #BE6C39;
    color: #fff;
}
.color-sleep.btn-symptoms::after
{
    background-color: #977224;
    color: #fff;
}
.color-negative.btn-symptoms::after
{
    background-color: #53AAA8;
    color: #fff;
}
.color-selfharm.btn-symptoms::after
{
    background-color: #34717A;
    color: #fff;
}
.color-depressive.btn-symptoms::after 
{
    background-color: #16383D;
    color: #fff;
}
.color-cognitive.btn-symptoms::after 
{
    background-color: #748538;
    color: #fff;
}
.color-anxiety.btn-symptoms::after 
{
    background-color: #7C4726;
    color: #fff;
}

.btn-title{
    display: block;
    position: relative;
    font-size: 16px;
    font-weight: bold;
    top: -2px;
    left:10px
}

.btn-subtitle{
    display: block;
    position: relative;
    font-size: 14px;
    font-weight: normal;
    top: -3px;
    left: 10px;
    line-height: 14px;
    padding-right: 70px;
}

.modal-header 
{
    border-bottom:0;
}   
.modal-body hr{
    width: 33%;
    display: block;
    position: relative;
    left:33%;
    border: 0;
    height: 3px; /* Adjust the thickness */
    background-color: #00737B; /* Replace with your desired color */
    /* color:#00737B;
    border: 1.3px solid #00737B; */
}
.modal-title{
    width: 100%;
    font-size: 38px;
    font-weight: bold;
    color:#00737B;
    padding-top: 50px;
}
.btn-close{
    right: 30px;
    position: relative;
    top: -20px;
}
.modal-body
{
    font-size: 24px;
    font-weight: normal;
    color:#58595B;
    padding-bottom:60px;
}
.modal-dialog {
    width: 80%; /* Set modal width to 80% */
    max-width: 80%; /* Ensure it doesn't go beyond 80% */
  }

.modal-backdrop.show {
    backdrop-filter: blur(5px) !important; /* Apply blur */
    background-color: rgba(0, 115, 123,0.8)!important; /* Adjust overlay color and opacity */
    -webkit-backdrop-filter: blur(5px)!important; /* Add for Safari */
}


/* Style the track (the background of the range input) */
input[type="range"] {
    -webkit-appearance: none; /* Override default styling */
    width: 90%; /* Full width */
    height: 14px; /* Adjust the height of the track */
    background: #fff; /* Track color */
    background-image: url(../img/slider-bkg.png);
    background-size: 100% 100%;
    border-radius: 5px; /* Rounded corners */
    outline: none; /* Remove default outline */
    opacity: 0.7; /* Slight transparency */
    transition: opacity 0.3s;
}

input[type="range"]:hover {
    opacity: 1; 
    -webkit-appearance: none; /* Remove default appearance for better styling */
    touch-action: manipulation; /* Ensure touch events are handled correctly */
}

/* Style the thumb (the movable circle or handle) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Remove default styling */
    appearance: none;
    width: 35px; /* Width of the thumb */
    height: 35px; /* Height of the thumb */
    background: #3498db; /* Thumb color */
    border-radius: 50%; /* Make it a circle */
    cursor: pointer; /* Change cursor to pointer */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); /* Optional shadow */
    transition: background 0.3s ease;
    border:3px solid #FFF;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-webkit-slider-thumb:hover {
    background: #2980b9; /* Darken thumb color on hover */
    border:3px solid #000;
}

/* For Firefox */
input[type="range"]::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #3498db;
    border:3px solid #000;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-moz-range-track {
    background: #ddd;
    height: 10px;
    border-radius: 5px;
}

/* Container for the scale labels */
.range-labels {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    top: -23px;
    left: 0;
}

/* Style the individual labels */
.range-labels span {
    display: inline-block;
    text-align: center;
    width: 14.28%; /* 100% divided by 7 (for labels 1 to 7) */
    font-size: 18px;
    color:#58595B;
    font-weight: 600;
}

input[type="range"].color-positive::-webkit-slider-thumb{
    background-color: #A82C55;
}
input[type="range"].color-hostility::-webkit-slider-thumb{
    background-color: #6F1C39;
}
input[type="range"].color-manic::-webkit-slider-thumb{
    background-color: #4C1E54;
}
input[type="range"].color-addiction::-webkit-slider-thumb{
    background-color: #BE6C39;
}
input[type="range"].color-sleep::-webkit-slider-thumb{
    background-color: #977224;
}
input[type="range"].color-negative::-webkit-slider-thumb{
    background-color: #53AAA8;
}
input[type="range"].color-selfharm::-webkit-slider-thumb{
    background-color: #34717A;
}
input[type="range"].color-depressive::-webkit-slider-thumb{
    background-color: #16383D;
}
input[type="range"].color-cognitive::-webkit-slider-thumb{
    background-color: #748538;
}
input[type="range"].color-anxiety::-webkit-slider-thumb{
    background-color: #7C4726;
}

#symptomsModalLabel.color-positive{
    color: #A82C55;
}
#symptomsModalLabel.color-hostility{
    color: #6F1C39;
}
#symptomsModalLabel.color-manic{
    color: #4C1E54;
}
#symptomsModalLabel.color-addiction{
    color: #BE6C39;
}
#symptomsModalLabel.color-sleep{
    color: #977224;
}
#symptomsModalLabel.color-negative{
    color: #53AAA8;
}
#symptomsModalLabel.color-selfharm{
    color: #34717A;
}

#symptomsModalLabel.color-depressive{
    color: #16383D;
}
#symptomsModalLabel.color-cognitive{
    color: #748538;
}
#symptomsModalLabel.color-anxiety{
    color: #7C4726;
}


.range-labels.desc span {
    display: inline-block;
    text-align: center;
    width: 14.28%; /* 100% divided by 7 (for labels 1 to 7) */
    font-size: 14px;
    color:#58595B;
    font-weight: 600;
}
.range-labels.desc
{
    position: relative;
    width:100%;
    left:0;
    top:7px;
    font-size:10px;
}

#symptomo_tools
{
    display: block;
    position: relative;
    width: 100%;
    padding-top:60px;   
}

#symptomo_tools .btn
{
    background-color: transparent;
    width:100%;
    height: 45px;
    line-height: 25px;
    font-size:24px;
    border-radius: 28px;
    border:1.5px solid #000;
}

#symptomo_tools.color-positive .btn {border-color: #A82C55; }
#symptomo_tools.color-hostility .btn {border-color: #6F1C39; }
#symptomo_tools.color-manic .btn {border-color: #4C1E54; }
#symptomo_tools.color-addiction .btn {border-color: #BE6C39; }
#symptomo_tools.color-sleep .btn {border-color: #977224; }
#symptomo_tools.color-negative .btn {border-color: #53AAA8; }
#symptomo_tools.color-selfharm .btn {border-color: #34717A; }
#symptomo_tools.color-depressive .btn {border-color: #16383D; }
#symptomo_tools.color-cognitive .btn {border-color: #748538; }
#symptomo_tools.color-anxiety .btn {border-color: #7C4726; }


#symptomo_tools.color-positive .btn.full {background-color: #A82C55; color:#FFf;font-weight: bold; }
#symptomo_tools.color-hostility .btn.full {background-color: #6F1C39; color:#FFf;font-weight: bold;}
#symptomo_tools.color-manic .btn.full {background-color: #4C1E54; color:#FFf;font-weight: bold;}
#symptomo_tools.color-addiction .btn.full {background-color: #BE6C39; color:#FFf;font-weight: bold;}
#symptomo_tools.color-sleep .btn.full {background-color: #977224; color:#FFf;font-weight: bold;}
#symptomo_tools.color-negative .btn.full {background-color: #53AAA8;color:#FFf;font-weight: bold; }
#symptomo_tools.color-selfharm .btn.full {background-color: #34717A; color:#FFf;font-weight: bold;}
#symptomo_tools.color-depressive .btn.full {background-color: #16383D; color:#FFf;font-weight: bold;}
#symptomo_tools.color-cognitive .btn.full {background-color: #748538; color:#FFf;font-weight: bold;}
#symptomo_tools.color-anxiety .btn.full {background-color: #7C4726; color:#FFf;font-weight: bold;}

#symptomo_severity
{
    display: block;
    position: relative;
    width: 100%;
    top:25px;   
}
#symptomsModal #modal-body{
    padding-top: 0px;
}
#symptomsModal #modal-header
{
    padding-top: 0px;
    padding-bottom: 0px;
}
#symptomo_description
{
    display: block;
    position: relative;
    width: 100%;
    padding-top: 0px;
    line-height: 27px;
    top: -30px;  
}

#symptomo_hyper_hypo
{
    display: block;
    position: relative;
    width: 100%;
    padding-top: 0px; 
    padding-bottom:20px;  
}
#symptomo_hyper_hypo .btn
{
    background-color: transparent;
    width: 100%;
    height: 45px;
    line-height: 25px;
    font-size:24px;
    border-radius: 28px;
    border:1.5px solid #000;
}

/* #symptomo_hyper_hypo .btn.selected
{   
    background-color: #00737B;
    color: #FFF;
    font-weight: bold;
} */

.modal-content
{
    border-color:transparent; 
}

.btn.hyper{
    border-color: #7C4726 !important;
    color: #7C4726!important;
}
.btn.hypo{
    border-color: #2C5A80!important;
    color: #2C5A80!important;
}

.color-sleep .btn.hyper.selected{
    background-color: #977224 !important;
    color: #fff!important;
}

.color-anxiety .btn.hyper.selected{
    background-color: #7C4726 !important;
    color: #FFF!important;
}
.btn.hypo.selected{
    background-color: #2C5A80!important;
    color: #FFF!important;
}

#symptomsModalLabel.color-hypo{
    color: #2C5A80;
}

input[type="range"].color-hypo::-webkit-slider-thumb{
    background-color:#2C5A80 !important;
}

#symptomo_tools.color-sleep.color-hypo .btn.full{
    background-color: #2C5A80;
}
#symptomo_tools.color-anxiety.color-hypo .btn.full{
    background-color: #2C5A80;
}

/* section send data */
.title-ask-fucsia
{
    display: block;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 43px;
    font-weight: 700;
    color: #EE3E80;
    /* margin: 20px; */
    padding-top: 70px !important;
    padding-bottom: 30px !important;
}

#formregistration label
{
    padding-top: 0px;
    padding-bottom: 6px;
    padding-left:15px;
    color:#58595B; /*#00737B;*/
    font-size: 19px;
    width: 100%;
}

#formregistration input[type="text"], #formregistration input[type="email"], #formregistration input[type="input"]
{
    display: block;
    position: relative;
    width: 100%;
    height: 70px;
    /* margin: 20px; */
    font-size: 24px;
    border-radius: 36px;
    border: 2px solid #00737B;
    padding-left: 20px;
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, .3);
}
#formregistration input[type="input"]::placeholder,#formregistration input[type="email"]::placeholder
{
    color: #00737B;
    font-size: 24px;
    /* font-weight: 700; */
    opacity:0.4
}
.labelprivacy
{
    color:#702877 !important;
    font-weight: 800;
    text-align:left;
    width:100%;
    margin-left:0;
    padding-left:0 !important;
    font-size:19px !important;
}
.labelprivacydesc
{
    color:#000;
    font-weight: 400;
    text-align:left;
    width:100%;
    padding-left:0 !important;
    padding-bottom: 20px!important;
}
.labelunsubscribe
{
    color:#000;
    font-weight: 400;
    text-align:left;
    width:100%;
    padding-left:0 !important;
    padding-top:20px !important;
}

 /* Hide default checkbox */
 input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.custom-checkbox {
    /* display: inline-block; */
    width: 60px;
    height: 60px;
    background-color: #fff;
    border: 2px solid #00737B;
    border-radius: 4px;
    position: relative;
    border-radius:50%;
}
.custom-checkbox::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    /* background: #333; */
    transform: translate(-50%, -50%);
    display: none; /* Initially hidden */
}
input[type="checkbox"]:checked + .custom-checkbox::after {
    display: block;
}

/* Show the checkmark when the checkbox is checked */
input[type="checkbox"]:checked + .custom-checkbox::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 14px;
    width: 26px;
    height: 32px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Checkbox checked state */
input[type="checkbox"]:checked + .custom-checkbox {
    background-color: #00737B;
    border-color: #00737B;
}

/* Optional: Add some margin */
.checkbox-container {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    width: 100% !important;
    padding-left: 0 !important;
}

.checkbox-label {
    margin-left: 10px;
    font-size: 16px;
    color: #333;
    width: 95%;
}

.btn-function
{
    background-color: transparent;
    width: 40%;
    height: 60px;
    margin-left:20px;
    margin-right:20px;
    font-size:24px;
    border-radius: 28px;
    border:2px solid #707070;
}
.btn-function:hover
{
    border:2px solid #707070;
}
#button-send{
    background-color: #707070;
    color:#FFF;
    font-weight: 700;
}

.fixtobottom{
    position: absolute;
    top: 1780px;
}

.btn-start,.btn-start:hover{
    margin-top:30px;
    background-color: #0A9193;
    color:#FFF;
    font-weight: 700;
    border-radius:29px;
    width:20%;
    font-size:28px;
}

.title-header-info
{
    display: block;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 33px;
    font-weight: 600;
    color:#58595B;
    margin: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.logotop{
    top:100px;
    position: absolute;
}

#btnSleep::after , #btnAnxiety::after
{
    content: attr(data-content);
    display: block;
    position: absolute;
    top: 0;
    right: 30px;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 22px;
    top: 9px;
    line-height: 18px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    text-align: center;
}

#chartModalContent
{
    left:-34px;
}
/* #chartModalContent #chartContainer
{
    scale: 0.9;
    left: -70px;
} */

#chartModalContent 
{
    display: block;
    position: relative;
}
.novanta{
    width: 90%;
    max-width: 90%;
}

@media only screen and (max-width: 600px) {
    .btn-symptoms {
        border-radius:18px;
    }
    .btn-symptoms::after {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    
}

@media only screen and (max-width: 900px) {
    #chartContainer {
        text-align: center;
        background-image: url(../img/mobile_bck.png);
        background-size: 90% 90%;
        background-position: 52% 52%;
    }
    canvas{
        left:0%;
        transform: scale(0.76);
    }

    #sympthoms-container
    {
        display: none;
    }
}

@media only screen and (max-width: 800px) {
    #chartContainer {
        text-align: center;
        background-image: url(../img/mobile_bck.png);
        background-size: 86% 86%;
        background-position: 57% 52%;
    }
    canvas{
        left:1%;
    }
}

@media only screen and (max-width: 700px) {
    #chartContainer {
        text-align: center;
        background-image: url(../img/mobile_bck.png);
        background-size: 100% 100%;
        background-position: 54% 52%;
    }
    canvas{
        left: 0%;
        width: 88% !important;
        height: 85% !important;
        transform: scale(1.002);
    }
    .modal-title{
        font-size: 23px;
        padding-top:0;
    }
    .btn-close{
        top:0;
    }

    .range-labels {
        display: block;
        position:relative;
        display: flex;
        flex-direction: column-reverse;
        width: 30%;
        top: -67px;
    }
    .range-labels span{
        width: 100%;
        margin-bottom: 27px;
        text-align: right;  
    }
    
    input[type="range"]{
        transform: rotate(-90deg);
        top: -290px;
        position: relative;
        width: 360px;
    }
    .range-labels.desc {
        position: absolute;
        width: 38%;
        left: 66%;
        padding-top: 0;
        font-size: 18px;
        top: -66px;
        text-align: left;
    }
    .range-labels.desc span {
        width: 100%;
        text-align: left;
        margin-bottom: 33px;
    }
    #symptomo_tools {
        padding-top:10px;
    }
    #symptomo_severity
    {
      
        top:70px;   
    }
}


@media only screen and (max-width: 430px) {
    #chartContainer {
        text-align: center;
        background-image: url(../img/mobile_bck.png);
        background-size: 100% 100%;
        background-position: 52% 52%;
    }   
    canvas{
        left:0%;
    }
    .modal-title{
        font-size: 23px;
        padding-top:0;
    }
    .btn-close{
        top:0;
    }
    .modal-title{
        font-size: 23px;
        padding-top:0;
    }
    .btn-close{
        top:0;
        right: 3px;
    }

    .range-labels {
        display: block;
        position:relative;
        display: flex;
        flex-direction: column-reverse;
        width: 30%;
        top: -82px;
    }
    .range-labels span{
        width: 100%;
        margin-bottom: 27px;
        text-align: right;  
    }
    
    input[type="range"]{
        transform: rotate(-90deg);
        top: -290px;
        position: relative;
        width: 360px;
        left: -10px;
    }
    .range-labels.desc {
        position: absolute;
        width: 38%;
        left: 66%;
        padding-top: 0;
        font-size: 18px;
        top: -79px;
        text-align: left;
    }
    .range-labels.desc span {
        width: 100%;
        text-align: left;
        margin-bottom: 33px;
    }
    #symptomo_tools {
        padding-top:10px;
    }
    #symptomo_severity
    {
        top:70px;   
    }
    #symptomo_description
    {
        font-size:16px;
    }
    #symptomo_severity {
        top: 45px;
    }
}


/* iPhone 12/13/14 Pro Max, 12/13/14 Plus */
@media only screen 
and (min-device-width: 390px) 
and (max-device-width: 430px) 
and (-webkit-device-pixel-ratio: 3) 
and (orientation: portrait) {
    /* Styles for iPhone 12/13/14 Pro Max or Plus in portrait */
    #chartContainer {
        text-align: center;
        background-image: url(../img/mobile_bck.png);
        background-size: 100% 100%;
        background-position: 52% 52%;
    }   
    canvas{
        left:0%;
    }
    .modal-title{
        font-size: 23px;
        padding-top:0;
    }
    .btn-close{
        top:0;
        right: 3px;
    }
    .header-btn
    {
        font-size: 20px;
    }
    .btn-title {
        left:-5px;
        padding-right: 55px;
    }
    .btn-subtitle {
        left:-5px;
        padding-right: 55px;
    }
}

/* For landscape */
@media only screen 
and (min-device-width: 390px) 
and (max-device-width: 430px) 
and (-webkit-device-pixel-ratio: 3) 
and (orientation: landscape) {
    /* Styles for iPhone 12/13/14 Pro Max or Plus in landscape */
    #chartContainer {
        text-align: center;
        background-image: url(../img/mobile_bck.png);
        background-size: 70% 70%;
        background-position: 52% 52%;
    }   
    canvas{
        left:4%;
    }
    .header-btn
    {
        font-size: 20px;
    }
    .btn-title {
        left:-5px;
        padding-right: 55px;
    }
    .btn-subtitle {
        left:-5px;
        padding-right: 55px;
    }
}

@media (max-width: 575.98px) {
    .modal-dialog {
        margin-left: auto;
        margin-right: auto;
    }
}

