/* ==========================================================================
   GLS Brasil - Global Custom Styles & Overrides
   ========================================================================== */

/* Global body overflow-x reset to prevent horizontal scrollbars on all pages */
body {
    overflow-x: hidden !important;
}

/* 1. Limit the navigation links menu width */
header nav {
    max-width: 600px !important;
    width:  100%;
}

/* 2. Commitments section background adjustments */
section.our-commitments {
    background-position: center top !important;
    background-size: cover !important;
}

/* 3. Tracking access page help hint icons */
section.track-trace .content-alignment .form-container form div.container-track .hint-icon,
section.track-trace .content-alignment .form-container form div.container-key .hint-icon {
    content: '';
    display: block;
    background: url(../images/hint.svg) no-repeat center !important;
    background-size: cover !important;
    width: 30px;
    height: 30px;
    position: absolute !important;
    top: calc(50% - 15px) !important;
    right: 15px;
    cursor: pointer !important;
    transition: all .3s ease-in-out !important;
}
section.track-trace .content-alignment .form-container form div.container-track .hint-icon:hover,
section.track-trace .content-alignment .form-container form div.container-key .hint-icon:hover {
    filter: brightness(130%) !important;
}

/* 4. Define icons scale */
.icon-sca{
    height: 300px;
}
.logo-sca{
    height: 150px;
    width: auto;
}

@media (max-width: 1245px) {
  label {
    font-size: 20px;
  }

    section.track-trace .content-alignment .form-container form div.container-track .hint-icon,
    section.track-trace .content-alignment .form-container form div.container-key .hint-icon {
        width: 20px;
        height: 20px;
        margin: 5px 0px 5px 0px;
        right: 10px;
        top: calc(50% - 10px);
    }

    section.track-trace .content-alignment .form-container form div.container-track, section.track-trace .content-alignment .form-container form div.container-key{
        height: 35px;
        padding: 5px 40px 5px 40px;
    }

     section.track-trace .content-alignment .form-container form div.container-track::before {
        width: 20px;
        height: 20px;
        top: calc(50% - 10px);
        left: 10px;

    }
     section.track-trace .content-alignment .form-container form div.container-key::before {
        width: 20px;
        height: 20px;
        top: calc(50% - 10px);
        left: 10px;
    }

    section.schedule .content-alignment .form-container form div.container-from::before {
        width: 20px;
        height: 20px;
        top: calc(50% - 10px);
        left: 10px;
    }
    
    section.schedule .content-alignment .form-container form div.container-to::before {
        width: 20px;
        height: 20px;
        top: calc(50% - 10px);
        left: 10px;
    }

    section.schedule .content-alignment .form-container form input[type="text"], section.schedule .content-alignment .form-container form input[type="date"] {
        font-size: 20px;
    }

    section.schedule .content-alignment .form-container form div.container-from, section.schedule .content-alignment .form-container form div.container-to {
        height: 35px;
        padding: 5px 0px 5px 40px;
    }

    section.schedule .content-alignment .form-container form img {
        top: 30px;
        width: 35px;
        left: calc(50% - 15px);
    }
    section.schedule .content-alignment .form-container form {
        row-gap: 25px;
    }

    section.schedule .content-alignment .form-container form div.container-date {
        height: 35px;
        padding: 5px 40px 5px 40px;
    }

    section.schedule .content-alignment .form-container form input[type="submit"] {
        font-size: 20px;
        height: 30px;
    }
    .form-container form div.container-vessel {
        height: 35px;
        padding: 5px 40px 5px 40px;
    }
    
    .form-container form div.container-vessel::before {
        width: 20px;
        left: 10px;
    }

    
    section.schedule .content-alignment .form-container form .container-submit::before {
        height: 60px;
    }

    .textprinc {
        font-size: 25px;
    }

    .vessel-title {
        text-align: center;
        font-size: 15px;
    }

    /*Rastreio*/
    .infomap {
        font-size: 25px;
    }

    .mapinf {
        font-size: 15px;
    }

    /*Geral*/
    header .header-logo img {
        width: 100%;
        max-width: 30vw;
    }

    section.main .textbox h1 {
    text-align: center;
    font-size: 50px;
    }
    section.main .textbox h4 {
        text-align: center;
        animation:  duration timing-function delay iteration-count direction fill-mode;
    }
     section.main {
        background-position: right;
    }
     section.different {
    padding:75px 10px 75px 10px;
    height: auto;
    }
    section.different .icon-alignment .icon p {
        font-size: 12px;
    }
     section.different .icon-alignment .icon > a > img {
        width: 50vw;
     }

    /*Pag Index*/
    .logo-sca {
        height: auto;
        width: 80vw;
    }
}